vue导出后端回传的文件流

最新推荐文章于 2024-08-20 18:30:57 发布

莫物

最新推荐文章于 2024-08-20 18:30:57 发布

阅读量1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45618937/article/details/131222591

版权

axios.get() 方法用于发送 GET 请求至后端接口，并将响应数据的 responseType 设置为 ‘blob’，以便正确处理二进制文件。通过 window.URL.createObjectURL() 创建一个临时的下载链接，并使用元素进行下载操作。然后，通过解析响应头中的 Content-Disposition 头部信息获取文件名，并将链接设置为下载属性。

// 在 Vue 组件中定义一个方法，用于触发下载
methods: {
  downloadFile() {
    // 调用后端接口获取文件路径或者内容
    // 假设后端接口返回一个文件下载链接
    axios.get('/api/download', { responseType: 'blob' })
      .then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;

        // 提取文件名
        const contentDispositionHeader = response.headers['content-disposition'];
        let fileName = 'file';
        if (contentDispositionHeader) {
          const fileNameMatch = contentDispositionHeader.match(/filename="(.+)"/);
          if (fileNameMatch.length >= 2) {
            fileName = fileNameMatch[1];
          }
        }

        // 设置下载文件的属性（名称和类型）
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();

        // 清理创建的临时链接
        URL.revokeObjectURL(url);
      })
      .catch(error => {
        console.error(error);
        // 处理错误
      });
  }
}