JS implementation trigger download content (H5 download)

Overview

I am very interested in making use of JS control download , in the online search for information happened to see the relevant implementation methods, recorded for later development of reference, I believe that other people also useful.

Resources:

JS Front end Create HTML or JSON file and browser export download

Understanding Domstring, Document, FormData, Blob, File, arraybuffer data types

Implementation method

One way to implement this is to take advantage of the download attribute in H5. If you add this attribute to the a tag, clicking on the a tag will not jump to the link or open the image, but will download the resource directly. Examples are as follows:

<a href="large.jpg" download>下载</a>

Note: The compatibility of this property is poor , seemingly incompatible with Safara, and only applies to the same-origin URL.

So our implementation method is, when the user clicks, the HTML to add a have href and download attributes of a tag, and then use JS to click on a tag , and then you can automatically download. The relevant code is as follows:

var link = document.createElement('a');//设置下载的文件名link.download = filename;link.style.display = 'none';//设置下载路径link.href = src;//触发点击document.body.appendChild(link);link.click();//移除节点document.body.removeChild(link);

Then how to get this download path src? Here are 2 ways to do this.

Download pictures using canvas to Base64

We all know that using canvas can transform the canvas into a base64 image, and this base64 code is the source of the image. Examples are as follows:

var canvas = document.createElement('canvas');var context = canvas.getContext('2d');//这里在canvas上面进行一些操作//这里导出src，然后把这里的src赋给上面的src即可var src = context.toDataURL('image/jpeg');

Downloading text using BLOB objects

We can convert the text into binary with blob object and then download it using the method above. Examples are as follows:

//content是文本或字符串内容var blob = new Blob([content]);//这里导出src，然后把这里的src赋给上面的src即可var src = URL.createObjectURL(blob);

For creating BLOB objects, there are several examples:

//创建字符串对象var blob1 = new Blob([JSON.stringify(obj)]);//创建一个DOMString对象var s = '<div>Hello World!!</div>'var blob2 = new Blob([s], {type: 'text/xml'});//创建一个ArrayBuffer对象var abf = new ArrayBuffer(8);var blob3 = new Blob([abf], {type: 'text/plain'});

In addition, the canvas has a toblob API, using the following example:

var canvas = document.getElementById('canvas');canvas.toBlob(function(blob) {  var newImg = document.createElement('img'),      url = URL.createObjectURL(blob);  newImg.onload = function() {    // no longer need to read the blob so it's revoked    URL.revokeObjectURL(url);  };  newImg.src = url;  document.body.appendChild(newImg);});

JS implementation trigger download content (H5 download)