js学习之-------前端下载文件

Posted 2021-07-02 众颖

1、前端下载文件的两种形式（我目前知道的）：

（1）后台接口直接返回下载路径，根据路径下载;

（2）后台接口返回文件流 ，根据blob来下载

 

2、根据路径下载具体怎么做？

                     ---------------直接把a标签的href属性设置为文件路径即可！

　　　　　　--------------点击即可下载！

<a href="文件下载路径">下载文件</a>

3、文件流怎么下载？

后端传过来的文件流是二进制流，就像这样的：

 

咱们要把这些二进制数据变成对象的形式，才能对它进行操作

Blob类型就是二进制数据的容器，Blob对象是类似文件对象的二进制数据，可以像操作File对象一样操作Blob对象

axios({
  methods: \'GET\',
  url: 调接口的url，
  responseType: \'blob\'//为了避免文件出现乱码，一定要写
}).then(response => {
  let blob = new Blob([response.data], {type: \'application/vnd.openxmlformats-officedocument.wordprocessingml.document\'})
  let url = window.URL.createObjectURL(blob)//得到Blob URL，和Http协议的URL一样的作用
  //以下就和第一种方法一样了
  //创建一个a标签，不用管a标签的位置在哪，我们只是想利用它的下载功能而已
  //a标签隐藏
  let link = document.createElement(\'a\')//创建a标签
  link.href = url;//把Blob URL赋值给a标签的href属性
  link.download = "fileName";//给文件取下载的名字
  link.style.display = \'none\';//a标签隐藏
  document.body.appendChild(link);//页面中加入这个a标签
  link.click();//调用a标签的点击事件，假装我们点击了它
  document.body.removeChild(link);//最后删除这个元素
})

 

//下载blob文件对应格式的type
.doc    application/msword
.docx    application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls    application/vnd.ms-excel
.xlsx    application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.txt    text/plain