downloaded html page not opening in chrome or edge but in IE and giving noscript error - vue application

user_7411584 0
Viewed 161

In my application, i am trying to download html of current page which is with same domain name. I have written some method to download the html and it is downloading.

But, i have tried to open it in chrome as well as edge and it is not opening. But, in IE it is opening and displaying text of noscript tag (We're sorry but app doesn't work properly without JavaScript enabled.Please enable it to continue.).

I am inputting intranet site URL and clicking the download button. Here is my method below.

downloadHtml() {
  let url = this.urlInput;  // input text v-model value
  fetch(url)
    .then((res) => res.text())
    .then((html) => this.downloadAsFile("report.html", html)); // by this name it is downloading
},
downloadAsFile(name, text) {
  const link = this.createDownloadableLink(name, text);
  const clickEvent = new MouseEvent("click");
  link.dispatchEvent(clickEvent);
},
createDownloadableLink(fileName, content) {
  let link = document.createElement("a");
  link.href = 'data:attachment/text,' + encodeURIComponent(document.documentElement.outerHTML);
  link.target = '_blank';
  link.download = fileName;
  return link;
},

**The problems are :

    1. The app root signifies the public/index.html and that downloaded html is this one not the current page's html.

    2. Chrome or Edge is not opening that html page even i checked browser is javascript enabled.

So, what i have to change the download the current page html?

vue.js html javascript
1 Answers

The problem is that an HTML file in not an application/octet-stream file type. The mime type of an HTML page is text/html

I'm unsure of the way you try to create your download link. I don't have time to test it, but there is the way I do it usually using the createObjectURL API :

async function fetchHTML(url) {

let content = await fetch(url).then(resp => resp.text());

let file = new Blob([content],{type:'text/html'});
let href = window.URL.createObjectURL(file);
let a = document.createElement('a');

a.href = href;
a.setAttribute('download', 'report.html');
document.body.appendChild(a);
a.dispatchEvent(new MouseEvent('click'));

}

Another problem is that you don't append your link into the DOM in the code you provided. So the DOM cannot trigger your mouse event and so starting the download (it's needed by some browsers).

With the good mime type, the file in a proper format and a link in to the dom, it should be ok.

user_56554340
Related