CODEWITHSUNDEEP
javascripthtml
12318867
12318867

Reputation: 17

How to download newly created HTML file?

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

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

And I want to download this newly create HTML document. 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]. How can I download this file?

Upvotes: 0

Views: 731

Answers (3)

Vickey Sharma
Vickey Sharma

Reputation: 100

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}


// Start file download.
function myFunction(){
  let html = document.getElementById("textarea").value;;
  download("hello.html", html); 
}
<textarea id="textarea" placeholder="Type your HTML here..."><h1>WORKING?????</h1></textarea>

<button onclick="myFunction()">GET FILE</button>

Upvotes: 0

BadPiggie
BadPiggie

Reputation: 6379

You cannot append the filename in URL, Because the HTML File that you created using createHTMLDocument() is not a actual HTML file and Not available in your server, It's a Javascript HTMLDocument Object.

You can use Data URI, as follows, Complete Tutorial Here..

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
download("newDoc.html","<html><head><title>Hello</title></head><body>Hello World!</body></html>");

NOTE: The function encodeURIComponent() will not affect the HTML after download.

Upvotes: 0

Keith
Keith

Reputation: 24221

A Couple of stages.

  1. Place the HTML of the document into a blob,.
  2. Convert blob into a blob url
  3. Create a link to download this 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>

Upvotes: 2

Related Questions