vue axios 请求下载流文件直接复制就行

最新推荐文章于 2024-07-23 19:11:17 发布

段wl

最新推荐文章于 2024-07-23 19:11:17 发布

阅读量128

点赞数 1

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/sdgjah2/article/details/139143862

版权

async downloadFile() {
        try {
          // 替换为你的后端文件流接口URL
          const url = "http://192.168.9.50:55023/business/defectAnalysis/exportExcel/" + this.selectionIds
          // 设置responseType为'blob'来处理二进制流数据
          const response = await axios.get(url, {
            responseType: 'blob'
          });

          // 获取文件名，通常从响应头的Content-Disposition中提取
          const contentDisposition = response.headers['content-disposition'];
          //可以将自己的文件类型直接固定 也可以在header中动态取值
          //添加.xls 后文件名称固定位.xls文件  不写默认为text
          let fileName = 'downloadedFile.xls'; // 默认文件名  

          if (contentDisposition) {
            const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
            if (matches != null && matches[1]) {
              fileName = matches[1].replace(/['"]/g, '');
            }
          }

          // 创建一个Blob对象表示文件内容，并使用URL.createObjectURL创建一个指向该Blob的URL
          const urlToDownload = window.URL.createObjectURL(new Blob([response.data]));

          // 创建隐藏的可下载链接
          const link = document.createElement('a');
          link.href = urlToDownload;
          link.download = fileName;
          document.body.appendChild(link);

          // 触发点击下载
          link.click();

          // 清理
          document.body.removeChild(link);
          window.URL.revokeObjectURL(urlToDownload);
        } catch (error) {
          console.error('下载文件时发生错误:', error);
        }
      },