一、HTML download 与文件下载
如果希望在前端侧直接触发某些资源的下载，最方便快捷的方法就是使用HTML5原生的download属性，例如：
但显然，如果纯粹利用HTML属性来实现文件的下载（而不是浏览器打开或浏览），对于动态内容，就无能为力。
例如，我们对页面进行分享的时候，希望分享图片是页面内容的实时截图，此时，这个图片就是动态的，纯HTML显然是无法满足我们的需求的，借助JS和其它一些HTML5特性，例如，将页面元素转换到canvas上，然后再转成图片进行下载。
是否支持download属性的监测：要监测当前浏览器是否支持download属性，一行JS代码就可以了，如下：
var isSupportDownload = 'download' in document.createElement('a'); 二、借助HTML5 Blob实现文本信息文件下载
原理其实很简单，我们可以将文本或者JS字符串信息借助Blob转换成二进制，然后，作为<a>元素的href属性，配合download属性，实现下载。
代码也比较简单，如下示意（兼容Chrome和Firefox）：
var funDownload = function (content, filename) { // 创建隐藏的可下载链接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 字符内容转变成blob地址 var blob = new Blob([content]); eleLink.href = URL.createObjectURL(blob); // 触发点击 document.body.appendChild(eleLink); eleLink.click(); // 然后移除 document.body.removeChild(eleLink);}; 其中，content指需要下载的文本或字符串内容，filename指下载到系统中的文件名称。
触发下载的JS代码就几行：
button.addEventListener('click', function () { funDownload(textarea.value, 'test.html'); }); 不止是.html文件，.txt、 .json等只要内容是文本的文件，都是可以利用这种小技巧实现下载的。
在Chrome浏览器下，模拟点击创建的<a>元素即使不append到页面中，也是可以触发下载的，但是在Firefox浏览器中却不行，因此，上面的funDownload()方法有一个appendChild和removeChild的处理，就是为了兼容Firefox浏览器。
实例：
var eleTextarea = document.querySelector('textarea');var eleButton = document.querySelector('input[type="button"]');// 下载文件方法var funDownload = function (content, filename) { var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 字符内容转变成blob地址 var blob = new Blob([content]); eleLink.href = URL.createObjectURL(blob); // 触发点击 document.body.appendChild(eleLink); eleLink.click(); // 然后移除 document.body.removeChild(eleLink);};if ('download' in document.createElement('a')) { // 作为test.html文件下载 eleButton.addEventListener('click', function () { funDownload(eleTextarea.value, 'test.html'); });} else { eleButton.onclick = function () { alert('浏览器不支持'); };} 总结：
1、download属性下载文件：download="文件路径"
2、Blob二进制转换：new Blob([content])，以及二进制路径转换：URL.createObjectURL(new Blob([content]))