VUE中后端发送数据流，前端接收并下载文件为csv格式

一、html部分

<el-table-column label="下载">
    <template #default="scope">
        <button class="downLoad" @click="downLoad(scope.row.fileName)">下载</button>
    </template>
</el-table-column>

二、接口部分 OTNInspections.js

// 下载指定csv文件
export const getDownload = (params) => {
  return request({
    url:'接口地址',
    method:'GET',
    params
  })
}

三、js部分

引入接口地址
import { getDownload } from "@/api/OTNInspections";

export default {
    methods：{
        // 下载
        downLoad(fileName) {
          // 传给后端的参数
          let params = {
            fileName
          };
          getDownload(params).then(res => {
            console.log(res);
            let blob = this.dataURLtoBlob(res.data.fileData);
            let downloadUrl = window.URL.createObjectURL(blob);
            let anchor = document.createElement("a");
            //设置下载的文件名
            anchor.download = params.fileName;
            anchor.href = downloadUrl;
            anchor.click();
          });
        },
        dataURLtoBlob(base64Str) {
            let bstr = atob(base64Str),
            n = bstr.length,
            u8arr = new Uint8Array(n);
            while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          // 下载的是csv格式的文件
          return new Blob([u8arr], { type: "text/tab-separated-values" });
        },
     }
}