vue文件流下载实例

场景描述：

前端请求接口，接口的response返回为文件流，前端进行下载

1、定义触发按钮

<el-button type="success" @click="export()">导 出</el-button>

import {  export } from '@/views/request.js';

　　

2、定义接口请求：请求时需要加入responseType 为blob，对文件流 进行转换

// 导出下载
export function export(data) {
  return request({
    url: "/export",
    method: "post",
    data,
    responseType: 'blob',//将文件流转成blob对象
    noErrorMsg: true
  });
}

3、vue页面定义渲染文件流方法

// 导出
    export(type) {
      let req = {
        ...this.queryData,
      };
      export(req)
        .then((res) => {
          // res就是接口返回的文件流了; 定义请求的接口时需标明responseType: 'blob',//将文件流转成blob对象
          let objectUrl = window.URL.createObjectURL(new Blob([res]));
          const elink = document.createElement('a');
          elink.download = `${this.tableTitle}.xlsx`; //下载文件名称,
          elink.style.display = 'none';
          elink.href = objectUrl;
          document.body.appendChild(elink);
          elink.click();
          document.body.removeChild(elink);
          window.URL.revokeObjectURL(elink.href); // 释放URL 对象
        })
        .catch((error) => {
          console.log(error);
        });
    },