文件下载的几种方式

后端下载

---

向后端发起下载请求，将请求返回的内容通过浏览器下载到本地

通过a标签下载

---

eg:

  <a href="123.jpg" download>点击下载</a>

  <a href="123.jpg" download="text.jpg">点击下载</a>

a标签的href属性值为下载链接，点击链接时如果链接对应地址为浏览器可识别文件时，例如，图片，pdf等时，会直接打开文件，而不会下载。设置download属性后，可在点击链接时下载图片，pdf等文件。

download属性值可为任意文件名称，表示下载文件的命名。

如果需要下载的资源是跨域的，包括跨子域，在Chrome浏览器下，使用download属性是可以下载的，但是，并不能重置下载的文件的命名；而FireFox浏览器下，则download属性是无效的，也就是FireFox浏览器无论如何都不支持跨域资源的download属性下载。而，如果资源是同域名的，则两个浏览器都是畅通无阻的下载，不会出现下载变浏览的情况。

 在不使用download属性的情况下，后端需要配置

header("Content-type: image/jpeg");

header("Content-Disposition: attachment; filename='download.jpg'");

来支持下载

通过window.open(url)方法下载

---

该方法相当于通过浏览器向服务器端发起get请求获取资源

通过form表单提交方式下载

---

创建一个form表单，将要上传的数据塞入form表单，触发表单的提交

这种上传方式主要用于需要提交给下载接口的参数太多而get请求无法支持的场景

前端下载

---

不需要从服务器上获取下载资源，而是将内存中已有的数据下载到本地的下载方式

将要下载的内容包装成Blob对象，Blob对象可以通过window.URL对象生成一个网络地址，通过该地址来下载资源

Blob对象可以看做是存放二进制数据的容器，此外还可以通过Blob设置二进制数据的MIME类型。

window.URL.createObjectURL(blob)方法可以创建一个对象URL，并返回指向一块内存的地址。

对象URL指的是（引用保存在File或Blob中数据的）URL。

eg:

var canvas = document.getElementById("canvas");

canvas.toBlob(function(blob){

    // 使用 createObjectURL 生成地址，格式为 blob:[页面链接的协议和domain部分]/fd95b806-db11-4f98-b2ce-5eb16b38ba36

    var url = URL.createObjectURL(blob);

    var a = document.createElement("a");

    a.download = "canvas";

    a.href = url;

    // 模拟a标签点击进行下载

    a.click();

    // 下载后告诉浏览器不再需要保持这个文件的引用了

    URL.revokeObjectURL(url);

});