javascript - 如何下载新创建的HTML文件？(How to download newly created HTML file?)

Question

I create an HTML file with document.implementation.createHTMLDocument() function.

(我使用document.implementation.createHTMLDocument()函数创建一个HTML文件。)

Like so:

(像这样：)

 var doc = document.implementation.createHTMLDocument("My New Document");

And I want to download this newly create HTML document.

(我想下载这个新创建的HTML文档。)

I tried this:

(我尝试了这个：)

var link = document.createElement('a');
link.href = doc;
link.download = 'newDoc.html';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

But doesn't work.

(但是不起作用。)

It redirects me to myDomain.com/[object HTMLDocument] .

(它将我重定向到myDomain.com/[object HTMLDocument] 。)

How can I download this file?

(如何下载此文件？)

  ask by 12318867 translate from so

Answer 1

A Couple of stages.

(几个阶段。)

1. Place the HTML of the document into a blob,.

   (将文档的HTML放入Blob。)

2. Convert blob into a blob url

   (将Blob转换为Blob网址)

3. Create a link to download this url

   (创建一个链接来下载此URL)

Example below..

(下面的例子)

 const bt = document.querySelector('button'); bt.addEventListener('click', () => { //lets create some document const doc = document.implementation.createHTMLDocument("My New Document"); const hello = doc.createElement('p'); hello.innerText = 'Hello'; doc.body.appendChild(hello); //now get it's contents and place into a blob const blob = new Blob([doc.documentElement.innerHTML], { type: 'text/html' }); //now convert to url const docUrl = window.URL.createObjectURL(blob); //were done, lets create a href to this and download const aclick = document.createElement('a'); aclick.href = docUrl; aclick.download = 'download.html'; aclick.click(); //tidy up window.URL.revokeObjectURL(docUrl); }); 

 <p>Click button below to download some HTML</p> <button>download</button>