前端文件的下载

file对象，blob对象，filreader对象，fileList和dataTransfer。
生成下载链接，a.download属性进行下载。

的download属性

一般情况下我们都是将文件上传到后端存储，然后再根据需要通过后端进行文件下载。这种情况需要后端来告知浏览器文件需要下载而不是打开，这样前后端都需要操作是令人不悦的。
终于，H5为提供了一个新属性download，一旦a标签具有down属性，点击该标签后就会自动下载对应href下的资源文件。比如：

点我下载

当然，直接在你的html中使用上面的代码还是无法下载，因为存在跨域资源限制。
上面实例中的a标签的href的链接指向的文件仍然是后端数据，现在我们可以使用js提供的一些方法来创建特别的URL提供文件下载：
目前主要有两种URL,

BlobURL
DataURl

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对象。

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链接了。

DataURL

上面都只说到BlobURL，其实还有一种链接，即DataURL，但这种链接是FileReader对象生成的。
一般情况下BlobURL已经足够，但是经过多次尝试，在手机端貌似无法打开BlobURL，也就无法实现下载，而DataURL却可以打开。（但是DataURL有时候也会失败！且在PC端也容易失败）
FileReader的相关方法可以对Blob对象和File对象进行读取：

其中，
FileReader.readAsDataURL()是我们需要的方法，通过该方法，FileReader将读取Blob或File对象并使得result属性的值包含data:URL格式的链接，即DataURL。

简单的总结

a标签的download属性可以告知浏览器直接下载href指定的文件。
href除了正常正常的URL链接，还支持BlobURL和DataURL。（是具有生命周期的）
我们保存文件数据可以使用Blob对象或File对象。
使用URL.createObjectURL(blob/file);创建BlobURL.
使用FIleReader.readAsDataURL(blob/file)创建DataURL.