vue3文件下载

效果图

template

<el-table-column prop="fileName" label="附件">
        <template #default="scope">
            <a href="##" @click.prevent="fDownloadHandler(scope.row.fileId)">{{scope.row.fileName}}</a>
        </template>
      </el-table-column>

接口文件

需要添加 responseType: ‘blob’,

export function filedownloadList(data){
    return service({
        url:'/Wjgl/getFile',
        method:'post',
        params:data,
        responseType: 'blob',
    })
}

js

// 下载文件
const fDownloadHandler = (id) => {
  filedownloadList({ fileId: id }).then((res) => {
    // console.log(res,888); // 控制台输出：Blob {size: 30208, type: 'application/x-msdownload'}
    // return
    let fileName = res.headers["content-disposition"].split(";")[1].split("=")[1]; //后端携带在相应头的文件名称
    let blob = new Blob([res.data], { type: "application/octet-stream" }); // 根据服务器端返回的数据类型设置文件类型
    let link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    setTimeout(() => {
      URL.revokeObjectURL(link.href);
    }, 100);
  });
};

遇到的坑

控制台没有输出Blob {size: 30208, type: ‘application/x-msdownload’}，并发现后端返回的数据res没有headers。

解决

在接口的index.js文件的响应拦截器里面需要返回response，而不是response.data

// 添加响应拦截器
service.interceptors.response.use(
  function (response) {
      if (response.data.code == '401'){
        localStorage.clear();
        location.href = "/";
      }
        // 状态403，权限认证失败
  if (response.data.code==403){
closeLoading();
    return response.data;
  }
 // 状态403，系统异常
 if (response.data.code==500){
closeLoading();
  return response.data;
}
    let responseData = response.data;
    let responseDataCode = response.data.code;
    // 状态200，操作成功
closeLoading();
    if (responseDataCode == 200) {
      // console.log('data');
      return response.data;
    }
    if (response.status == 200) {
      // 重点！！！
      return response
    }
    if(!response.Blob ){
      // console.log('Blob');
      ElMessage({
        type: 'error',
        message: responseData.message,
      })
    }
  return response;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});