This article reprinted from: www.zhangxinxu.com/wordpress/?…

One, HTML and file download

If you want to trigger the download of certain resources directly on the front end, the easiest way to do this is to use HTML5’s native download properties, such as:

<a href="large.jpg"The download > download < / a >Copy the code

See my previous article, “Understanding the Download properties in HTML/HTML5.”

But obviously, if you use purely HTML attributes to download files (rather than open or browse the browser), there’s nothing you can do about dynamic content.

For example, when we share the page, we want the shared image to be a real-time screenshot of the page content. In this case, the image is dynamic. Pure HTML obviously cannot meet our needs. For details, see “SVG

Introduction and Screenshots”.

But this article is not about downloading images, it’s about downloading text messages, and the HTML feature you need to use is not Canvas, but something else.

Second, with HTML5 Blob to achieve text information file download

If you’re not familiar with bloBs, you can start by reading the article “Understanding DOMString, Document, FormData, Blob, File, ArrayBuffer data types” I wrote a few years ago.

The principle is very simple, we can use the Blob to convert text or JS string information into binary, and then, as the element href attribute, with the download attribute, to download.

Code is also relatively simple, as shown below (compatible with Chrome and Firefox) :

var funDownload = functionVar eleLink = document.createElement(content, filename) {// create hidden downloadable link var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none'; Var blob = new blob ([content]); var blob = new blob ([content]); eleLink.href = URL.createObjectURL(blob); / / triggered by clicking on the document. The body. The appendChild (eleLink); eleLink.click(); / / then remove document. Body. RemoveChild (eleLink); };Copy the code

Content indicates the text or string content to be downloaded, and filename indicates the name of the file to be downloaded to the system.

All words do not convey the meaning, an example to walk the heart.

You can download the demo by clicking here: HTML file based on the funDownload implementation

Click the “download” button, and all contents in the text field will be downloaded as an. HTML suffix file. The effect of each process is shown in the following pictures:

A download confirmation box appears (or you can download it directly depending on your browser Settings), and the name defaults to test.html.

Then the corresponding save directory will have a file like the following:

Double-click the test. HTML file can be viewed normally in the browser, indicating that the information is saved correctly.

The JS code that triggers the download is just a few lines:

button.addEventListener('click'.function () {
    funDownload(textarea.value, 'test.html');	
});Copy the code

Three, with Base64 to achieve arbitrary file download

For non-text files, it is also possible to trigger the download directly with JS. For example, if we want to download an image, we can convert the image to Base64 format and download it.

Code hint:

var funDownload = functionVar eleLink = document.createElement(domImg, filename) {// create a hidden downloadable link var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none'; Var canvas = document.createElement();'canvas');
    var context = canvas.getContext('2d'); var width = domImg.naturalWidth; var height = domImg.naturalHeight; context.drawImage(domImg, 0, 0); // For a PNG image, canvas. ToDataURL ('image/png')
    eleLink.href = canvas.toDataURL('image/jpeg'); / / triggered by clicking on the document. The body. The appendChild (eleLink); eleLink.click(); / / then remove document. Body. RemoveChild (eleLink); };Copy the code

Iv. Conclusion

Not just.html files,.txt,.json and other text files can be downloaded using this trick.

In Chrome, the element created by simulating a click can trigger a download even if it doesn’t append to the page, but it doesn’t in Firefox, so the funDownload() method above has an appendChild and removeChild handling. Just to be compatible with Firefox.

The Download property is supported from Edge13 and can trigger downloads based on peer testing, although the generated files are named like GUids and need to be manually suffixes.

That’s all, thanks for reading!