概述
我对使用js控制下载非常感兴趣，在网上查资料的时候碰巧看到了相关实现方法，记录下来供以后开发时参考，相信对其他人也有用。
参考资料：
JS前端创建html或json文件并浏览器导出下载
理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
实现方法
一种实现方法是利用H5中的download属性。如果给a标签加了这个属性的话，点击a标签不会跳到链接或者打开图片，而是会直接下载资源。示例如下：
<a href="large.jpg" download>下载</a>注意：这个属性的兼容性很差，貌似不兼容safara，并且仅适用于同源URL。
于是我们的实现方法是，在用户点击的时候，给html添加一个拥有href和download属性的a标签，然后用js对a标签进行点击，然后就可以自动下载了。相关代码如下：
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);然后怎么来获得这个下载路径src呢？下面介绍2种方法。
利用canvas转base64下载图片
我们都知道，利用canvas可以把画布转化为一个base64的图片，这个base64代码就是图片源。示例如下：
var canvas = document.createElement('canvas');var context = canvas.getContext('2d');//这里在canvas上面进行一些操作//这里导出src，然后把这里的src赋给上面的src即可var src = context.toDataURL('image/jpeg');利用Blob对象下载文本
我们可以把文本用Blob对象转化为二进制，然后利用上面的方法下载。示例如下：
//content是文本或字符串内容var blob = new Blob([content]);//这里导出src，然后把这里的src赋给上面的src即可var src = URL.createObjectURL(blob);对于创建blob对象，有下面几个示例：
//创建字符串对象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'});另外canvas有一个toBlob的api，使用示例如下：
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 实现触发下载内容(H5 download)
原文地址：https://www.cnblogs.com/yangzhou33/p/9521281.html