当前位置：首页 > news >正文

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

news 来源：原创 2025/6/27 18:15:57

文章目录

- Vue 项目中下载返回的文件流操作步骤
- 一、使用 Axios 请求文件流数据
- 二、设置响应类型为 ‘blob’
- 三、创建下载链接并触发下载
- 四、在 Vue 组件中集成下载功能
- 五、解释与实例说明
- - 1、使用 Axios 请求文件流数据：
  - 设置响应类型为 'blob'：
  - 创建下载链接并触发下载：
  - 下载文件，文件名获取不到

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响应头，也就能够拿到这个附件名字