vue实现文件流形式的导出下载

文章目录

Vue 项目中下载返回的文件流操作步骤

1、使用 Axios 请求文件流数据;

2、设置响应类型为 'blob';

3、创建下载链接并触发下载。

其中,最关键的一步是创建一个 Blob 对象并使用 URL.createObjectURL 方法生成一个下载链接。以下将详细说明如何实现。

一、使用 Axios 请求文件流数据

在 Vue 项目中,需要使用 Axios 来发送请求并获取文件流数据。可以在组件中使用 Axios 进行 HTTP 请求,确保在请求头中设置适当的响应类型。

复制代码
import axios from 'axios';

export default {
  methods: {
    downloadFile() {
      axios({
        method: 'get',
        url: 'your-file-endpoint',  // 替换为实际的文件流接口
        params:{},
        responseType: 'blob'
      })
      .then(response => {
        this.handleFileDownload(response.data);
      })
      .catch(error => {
        console.error('Error downloading the file', error);
      });
    }
  }
};

二、设置响应类型为 'blob'

在 Axios 请求中,设置 responseType 为 'blob',这样 Axios 会将响应数据处理为 Blob 对象。Blob 对象表示一个不可变的、原始数据的类文件对象。

三、创建下载链接并触发下载

为了触发文件下载,需要创建一个 URL 链接并模拟点击事件。可以在组件中添加一个方法来处理 Blob 数据并进行下载。

复制代码
methods: {
	  /**
	 * 拿到文件流后的下载的方法
	 * @param {*} data
	 * @param {*} filename
	 * @param {*} mime
	 * @param {*} bom
	 */
	 function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
	  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
	  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
	  if (typeof window.navigator.msSaveBlob !== 'undefined') {
	    window.navigator.msSaveBlob(blob, filename);
	  } else {
	    const blobURL = window.URL.createObjectURL(blob);
	    const tempLink = document.createElement('a');
	    tempLink.style.display = 'none';
	    tempLink.href = blobURL;
	    tempLink.setAttribute('download', filename);
	    if (typeof tempLink.download === 'undefined') {
	      tempLink.setAttribute('target', '_blank');
	    }
	    document.body.appendChild(tempLink);
	    tempLink.click();
	    // 移除 a 标签
	    document.body.removeChild(tempLink);   
	     // 释放 URL 对象
	    window.URL.revokeObjectURL(blobURL);
	  }
	}
}

四、在 Vue 组件中集成下载功能

复制代码
<template>
  <div>
    <button @click="downloadFile">Download File</button>
  </div>
</template>
<script lang="ts" setup>

  // 下载
async function downloadFile() {
    try {
       axios({
        method: 'get',
        url: 'your-file-endpoint',  // 替换为实际的文件流接口
        params: {},   // 请求参数
        responseType: 'blob'
    }).then(
        (response) => {
          console.log('downloadByData',response)
          if(response.headers['content-disposition']) {
            let fileName = response.headers['content-disposition'].split('filename=')[1];
            // console.log('filename',fileName)
            fileName = fileName.replace(/"/g, '');
            downloadByData(response.data,fileName)
          } else {
            downloadByData(response.data,'xiazai.xlsx')
          }          
        }
      )
    } catch (e) {
      console.log(e);
    }
  }
  
  
  /**
 * 拿到文件流后的下载的方法
 * @param {*} data
 * @param {*} filename
 * @param {*} mime
 * @param {*} bom
 */
 function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    window.navigator.msSaveBlob(blob, filename);
  } else {
    const blobURL = window.URL.createObjectURL(blob);
    const tempLink = document.createElement('a');
    tempLink.style.display = 'none';
    tempLink.href = blobURL;
    tempLink.setAttribute('download', filename);
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank');
    }
    document.body.appendChild(tempLink);
    tempLink.click();
    document.body.removeChild(tempLink);
    window.URL.revokeObjectURL(blobURL);
  }
}


</script>

五、解释与实例说明

1、使用 Axios 请求文件流数据:

Axios 是一个基于 Promise 的 HTTP 客户端,可以用于浏览器和 Node.js。

在发送请求时,通过设置 responseType 为 'blob' 来确保返回的数据是二进制流格式。

设置响应类型为 'blob':

Blob 对象表示一个不可变的、原始数据的类文件对象,可以表示数据,比如二进制数据。

在请求中指定 responseType 为 'blob',可以确保 Axios 将响应数据处理为 Blob 对象。

创建下载链接并触发下载:

Blob 对象可以通过 URL.createObjectURL 方法生成一个临时的 URL,用于表示该 Blob 对象。

创建一个 a 标签,并设置其 href 属性为生成的 URL,download 属性为文件名。

通过 JavaScript 触发点击事件来启动下载,然后移除 a 标签并释放生成的 URL。

下载文件,文件名获取不到

二进制流下载文件,从response header里面获取文件名,后端也设置了header【Content-Disposition】的值为【attachment;filename=MY_DOCUMENT_23.pdf】

network查看请求,response header的确是有值,但是axios获取header的值,永远只有content-type

这个请求是跨域请求

服务端加一个额外的响应头

【Access-Control-Expose-Headers】值为【Content-Disposition】

设置了这个响应头后,axios就可以获取到content-disposition响应头,也就能够拿到这个附件名字

相关推荐
速易达网络1 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘1 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全5 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing5 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆5 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding6 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js