文件下载 vue 接口返回文件流

描述：vue接口返回文件流时的下载

完整代码如下，需要自己改一下url地址

还要改文件名，一定要加后缀

<template>
  <div>
    <el-button @click="downLoad">下载</el-button>
  </div>
</template>
 
<script>
import axios from "axios";
export default {
  methods: {
    // 下载
    downLoad() {
      axios({
        method: "get",
        responseType: "blob", // 必须设置成blob
        url: "自己的地址", // 自己的服务器接口，接口返回的是文件流
        headers: { // 设置请求头token
           authorization: ''
        },
      }).then(({ data,headers }) => {
        // 如果文件名从后台返回，要从响应头里取文件名
        // let filename = headers['content-disposition'].split('filename=')[1]
        // let bb = decodeURI(filename)

        const blob = new Blob([data]); 
        var a = document.createElement("a"); //创建a标签
        a.href = URL.createObjectURL(blob); // 把文件流赋值给a标签的href
        a.download = "测试.xls"; //利用a标签的download，自己设置文件名
        a.style.display = "none"; // 隐藏a标签
        document.body.appendChild(a); 
        a.click();  //点击a标签
        a.remove(); //删除a标签
      });
    },
  },
};
</script>

这里只是为了方便测试，

项目中建议把接口提出来写在api里

如果文件名从后端拿的话，要在响应头里取（和后端商量好）

拿到的名称如果需要url解码的话，使用 decodeURI(filename)方法

建议把下载方法封装一下

把方法写在utils里，在需要的地方调用就行

代码如下，data是接口返回的文件流，name的文件名：

//下载
export function download(data, name) {
  const blob = new Blob([data]);
  var a = document.createElement("a"); //创建a标签
  a.href = URL.createObjectURL(blob); // 把文件流赋值给a标签的href
  a.download = name; //利用a标签的download，自己设置文件名
  a.style.display = "none"; // 隐藏a标签
  document.body.appendChild(a);
  a.click(); //点击a标签
  a.remove(); //删除a标签
}