js增加属性_前端js实现文件下载

前端js实现文件下载

why?为什么需要前端下载文件？

简单，相对于流下载，然后解析。
用浏览器自身暴露的一些钩子函数和特性，相对来说会更简单，做起来也会更加方便

how? 怎么做前端下载？

常见的几种下载模式

• a标签下载
• canvas下载
  ### why?为啥可以用标签下载？
• 原因
  因为浏览器提供了钩子，而且在html5当中新增了download属性。
  浏览器支持，当改属性的链接被点击时，浏览器会以下载文件的方式下载href的属性上的链接
  这就是所谓的“钩子”，不过这个是通过标签属性做的（其实js和python的精髓，个人认为也是最底层细节的封装和“钩子函数的暴露”）
• 兼容性



所以IE是不支持的,但是如果是做内部的后台业务，download属性是很合适的，同时electron做客户端的话， 也是可以的。

ps:download是绑定的a标签上的

• 所以？show me the code

function download(href, title) {
    const a = document.createElement('a');
    a.setAttribute('href', href);
    a.setAttribute('download', title);
    a.click();
}

其实原理很简单，就是动态的增加一个a标签，然后动态的去增加download属性，然后click一下，完事。
href是http/https可以这样干，那么如果href是data url呢？
如果协议是data协议呢？
download('data:,Hello%2C%20World!', 'data-uris.txt');
没啥区别

• 那你说的canvas下载是啥意思啊？
  当url时data协议的时候，可以通过toDataURL()获取data urls的内容 const canvas = document.querySelector('#canvas');download(canvas.toDataURL(), 'download-image'); 那么这样也是可以下载下来的
  #如果我一定要兼容ie呢？
  那就不要用前端下载了，用Blob格式去下载，不要去那json格式，而是让后端用Blob格式，传输文件数据。