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

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

 

posted @ 2021-07-01 23:51  程序员冒冒  阅读(295)  评论(0编辑  收藏  举报