file对象，blob对象，filreader对象，fileList和dataTransfer。 生成下载链接，a.download属性进行下载 。 ### 1.``` 当然，直接在你的html中使用上面的代码还是无法下载，因为存在`跨域资源限制`。 上面实例中的a标签的href的链接指向的文件仍然是后端数据，现在我们可以使用js提供的一些方法来创建特别的URL提供文件下载： 目前主要有两种URL, + BlobURL + DataURl ### 2.Blob对象 `Blob`全称binary large object（二进制大对象），顾名思义，Blob对象就是用来存储二进制信息的“容器”。 ###### \#使用构造函数将非Blob对象转换为Blob对象 `Blob(blobParts[, options])` Blob() 构造函数返回一个新的 Blob 对象。 Blob的内容由参数数组中给出的值的串联组成。 很简单，我们把要转化的数据放到数组中作为参数即可： ``` var str = "This is a userful message!" var blob = new Blob([str]);//将字符串转化为Blob对象 ``` ###### \#将Blob对象转化为BlobURL 我们上面提到的a标签能打开BlobURL中的数据，这样我们就可以下载我们处理过的数据，步骤即： ***（即将数据转为Blob，再将Blob生成BlobURL，使用a标签下载。）*** ``` var url = URL.createObjectURL(blob); ``` 下面我们写一个方法来根据给定的文件内容和download动态下载文件。 ###### \#动态下载文件 ``` function downloadFile(content, filename) { // 创建a链接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 字符内容转变成BlobURL var blob = new Blob([content]); eleLink.href = URL.createObjectURL(blob); // 触发点击(开始下载) document.body.appendChild(eleLink); eleLink.click(); // 移除标签 setTimeout(function(e){ document.body.removeChild(eleLink); },1000); }; ``` 测试： ``` Test
点我下载
``` 理论上可以使用Blob对象下载任意类型的文件，毕竟都能转化为二进制文件，但目前主要用来存储文本文件。况且对于非文本文件或体积很大的文件，参数的传入是个问题。所以我们有必要学习File对象。 ### 3.File对象 File对象继承了Blob并进行了扩展，使其能够支持使用系统上的文件，如txt等常见文件。 比如我们有一张png，我们如何进行下载呢？当然可以使用Blob对象，但是参数又该如何写呢，这是很麻烦的。 这个时候我们就可以使用File对象获取png，而File继承自Blob，所以也能转换为BlobURL，但是File还有一个好处就是File对象可以从页面中获取文件（`input标签`），拖放操作生成的 `DataTransfer`对象。 我们从下面的例子中观察： ``` File对象和FileList对象 ``` 总结一下： input的`files`属性包含了上传的文件，当input使用`multiple`属性时可上传多个文件。其中，每个本件就是一个File对象。 现在我们就能使用`URL.createObjectURL(file);`来创建BlobURL链接了。 ### 4.DataURL 上面都只说到BlobURL，其实还有一种链接，即DataURL，但这种链接是`FileReader对象`生成的。 一般情况下BlobURL已经足够，但是经过多次尝试，在手机端貌似无法打开BlobURL，也就无法实现下载，而DataURL却可以打开。（但是DataURL有时候也会失败！且在PC端也容易失败） FileReader的相关方法可以对Blob对象和File对象进行读取：  其中， `FileReader.readAsDataURL()`是我们需要的方法，通过该方法，FileReader将读取Blob或File对象并使得`result属性`的值包含data:URL格式的链接，即DataURL。 ### 5.简单的总结 + a标签的`download`属性可以告知浏览器直接下载href指定的文件。 + href除了正常正常的URL链接，还支持BlobURL和DataURL。（是具有生命周期的） + 我们保存文件数据可以使用`Blob`对象或`File`对象。 + 使用`URL.createObjectURL(blob/file)`;创建`BlobURL`. + 使用`FIleReader.readAsDataURL(blob/file)`创建`DataURL`.