JS前端创建html或json文件并浏览器导出下载

一、HTML与文件下载

如果希望在前端侧直接触发某些资源的下载，最方便快捷的方法就是使用HTML5原生的download属性，例如：

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

如果纯粹利用HTML属性来实现文件的下载（而不是浏览器打开或浏览），对于动态内容，就无能为力。

例如，我们对页面进行分享的时候，希望分享图片是页面内容的实时截图，此时，这个图片就是动态的，纯HTML显然是无法满足我们的需求的，借助JS和其它一些HTML5特性，例如，将页面元素转换到canvas上，然后再转成图片进行下载。

但本文要介绍的下载不是图片的下载，而是文本信息的下载，所需要使用的HTML特性不是canvas，而是其它。

二、借助HTML5 Blob实现文本信息文件下载

原理其实很简单，我们可以将文本或者JS字符串信息借助Blob转换成二进制，然后，作为<a>元素的href属性，配合download属性，实现下载。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS前端创建html或json文件并浏览器导出下载</title> <style>textarea {max-width: 600px;width: 100%;-ms-box-sizing: border-box;box-sizing: border-box;font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;}input[type="button"] {font-size: 100%;height: 36px;}</style></head><body><div class="demo"><textarea rows="11"><!DOCTYPE html><html><head><meta charset="utf-8"><title>测试</title></head><body><h1>测试</h1></body></html></textarea><p><input type="button" value="作为test.html文件下载"></p></div><script>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('浏览器不支持');};}</script></body></html>

content 指需要下载的文本或字符串内容，filename指下载到系统中的文件名称，点击“下载”按钮，会把文本域中的内容全部作为一个.html后缀文件下载下来。

三、Blob对象

Blob 对象相当于一个容器，可以用于存放二进制数据。它有两个属性，size 属性表示字节长度，type 属性表示 MIME 类型。
如何创建：Blob 对象可以使用 Blob() 构造函数来创建

var blob = new Blob(['hello'], {type:"text/plain"});

Blob 构造函数中的第一个参数是一个数组，可以存放 ArrayBuffer对象、ArrayBufferView 对象、Blob对象和字符串。
Blob 对象可以通过 slice() 方法来返回一个新的 Blob 对象。

var newblob = blob.slice(0,5, {type:"text/plain"});

slice() 方法使用三个参数，均为可选。第一个参数代表要从Blob对象中的二进制数据的起始位置开始复制，第二个参数代表复制的结束位置，第三个参数为 Blob 对象的 MIME 类型。
canvas.toBlob() 也可以创建 Blob 对象。toBlob() 使用三个参数，第一个为回调函数，第二个为图片类型，默认为 image/png，第三个为图片质量，值在0到1之间。

var canvas = document.getElementById('canvas');canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);

下载文件
Blod 对象可以通过 window.URL 对象生成一个网络地址，结合 a 标签的 download 属性来实现下载文件功能。

比如把 canvas 下载为一个图片文件

var canvas = document.getElementById('canvas');canvas.toBlob(function(blob) {// 使用 createObjectURL 生成地址，格式为 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36var url = URL.createObjectURL(blob);var a = document.createElement('a');a.download = 'canvas';a.href = url; // 模拟a标签点击进行下载a.click(); // 下载后告诉浏览器不再需要保持这个文件的引用了URL.revokeObjectURL(url);});

四、结束语

不止是.html文件，.txt,.json等只要内容是文本的文件，都是可以利用这种小技巧实现下载的。

在Chrome浏览器下，模拟点击创建的<a>元素即使不append到页面中，也是可以触发下载的，但是在Firefox浏览器中却不行，因此，上面的funDownload ()方法有一个appengChild和removeChild的处理，就是为了兼容Firefox浏览器。