Vue实现文件下载功能-优快云博客

本文链接：https://blog.youkuaiyun.com/demo_020/article/details/119320133

本文介绍了如何在Vue项目中实现文件下载功能。通过点击主页面的下载按钮，利用JavaScript的a标签和Blob对象，可以实现从服务器获取文件并触发浏览器下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//接口文件
//报表网盘类型报表的下载
// export const downLoadNetDiskExcel = params => {
//   window.open(
//     `/${constConfig.basePath}/submit/task/downLoadNetDiskExcel?fileName=${params.fileName}&taskId=${params.taskId}`
//   );
// };
// export function downLoadNetDiskExcel(params){
//   return request({
//     method: 'post',
//     url: `/${constConfig.basePath}/submit/task/downLoadNetDiskExcel`,
//     responseType:'blob',//接收的文件流对象，很重要
//     data: params //业务需要传递的参数
//   });
// }

// export const downLoadNetDiskExcel = (params) => axiosservice({
//   method: 'post',
//   url: `/${constConfig.basePath}/submit/task/downLoadNetDiskExcel`,
//   data: params,
//   responseType: 'blob'
// });
export const downLoadNetDiskExcel = params =>
  axiosservice.post(
    `/${constConfig.basePath}/submit/task/downLoadNetDiskExcel`,
    params,
    { responseType: "blob" }//路径是接口地址
  );

主页面点击下载后

<el-button class="el-icon-bottom" @click="downloadFile(scope.row)"
                >下载</el-button
              >

主要代码

//下载
    async downloadFile(row) {
      const params = {
        taskId: this.taskId,
        fileName: row.fileName,
      };
      downLoadNetDiskExcel(params).then((res) => {
        let name = params.fileName; 
        let content = res.data;
        let blob = new Blob([content]);
        if ("msSaveOrOpenBlob" in navigator) {
          window.navigator.msSaveOrOpenBlob(blob, name);
        } else {
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.style.display = "none";
          downloadElement.href = href;
          downloadElement.download = name; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        }
        return;
      });
    },

vue实现下载功能