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

文章目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/63928.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用Keytool和OpenSSL生成和签发数字证书

一)keytool生成私钥文件(.key)和签名请求文件(.csr),openssl签发数字证书 J2SDK在目录%JAVA_HOME%/bin提供了密钥库管理工具Keytool,用于管理密钥、证书和证书链。Keytool工具的命令在JavaSE6中已经改变,不过以前的命令仍然支持。Keytool也可以用来管理对称加密算法中…

语言模型(序列模型)

终于快要毕业了&#xff0c;乘着还在还在研究室&#xff0c;把最后一章sequence模型也学完吧。 Sequence Model 一&#xff1a;基础知识1&#xff1a;符号的定义2&#xff1a;词典(Vocabulary) 与编码(Encoding) 二&#xff1a;RNN(Recurrent Neural Networks) 循环神经网络1&…

RK3568(六)——led设备驱动(GPIO子系统)

修改设备树文件 先关闭心跳灯功能&#xff0c;也就是在图 10.4.1.2 中第 167 行添加 status 改为 disabled&#xff0c;也就是禁止 work 这个节点&#xff0c;那么禁止心跳灯功能。 我们后面需要禁止哪个功能&#xff0c;只需要将其 status 属性改为 disabled 就可以了。 gpi…

【自然语言处理与大模型】使用llama.cpp将HF格式大模型转换为GGUF格式

llama.cpp的主要目标是在本地和云端的各种硬件上以最小的设置和最先进的性能实现LLM推理。是一个专为大型语言模型&#xff08;LLM&#xff09;设计的高性能推理框架&#xff0c;完全使用C和C编写&#xff0c;没有外部依赖&#xff0c;这使得它可以很容易地被移植到不同的操作系…

npm : 无法加载文件 D:\nodejs\npm.ps1

问题描述 npm run serve 启动一个Vue项目&#xff0c;报错如下&#xff1a; npm : 无法加载文件 D:\nodejs\npm.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/go.microsoft.com/fwlink/? LinkID135170 中的 about_Execution_Policies。…

【算法】EWMA指数加权移动平均绘制平滑曲线

EWMA&#xff08;Exponentially Weighted Moving Average&#xff0c;指数加权移动平均&#xff09;是一种常用的时间序列平滑技术&#xff0c;特别适用于对过去数据给予不同的权重。以下是对EWMA算法的详细介绍&#xff1a; 一、核心思想 EWMA算法的核心思想是通过指数衰减来…

UAC2.0 speaker——带反馈端点的 USB speaker(16bit 单声道)

UAC2.0 speaker 系列文章 UAC2.0 speaker——单声道 USB speaker(16bit) UAC2.0 speaker——类特殊请求 UAC2.0 speaker——音量控制 UAC2.0 speaker——多采样率支持 UAC2.0 speaker——24/32bit 支持 UAC2.0 speaker——speaker 数据传输 UAC2.0 speaker——同时支持 16bi…

智星云技术文档:GPU测速教程

安装gpu burn git clone https://github.com/wilicc/gpu-burn cd gpu-burn/ make测试 ./gpu_burn 60100.0% procd: 14280 (7373 Gflop/s) - 13390 (6997 Gflop/s) - 15912 (7110 Gflop/s) - 13184 (7055 Gflop/s) - 13464 (7369 Gflop/s) - 13974 (7351 Gflop/s) - 16626 (7…

Python工厂设计模式:简化对象创建

Python工厂设计模式&#xff1a;简化对象创建 引言什么是工厂模式&#xff1f;简单工厂模式示例定义基类和子类创建工厂类使用工厂创建对象 优点使用场景总结 引言 在编程中&#xff0c;我们经常需要创建不同的对象&#xff0c;但有时创建对象的逻辑可能会变得复杂。工厂设计模…

线程池+线程安全+常见锁

目录 一、线程池1、日志与策略模式2、线程池设计3、线程安全的单例模式&#xff08;1&#xff09;单例模式的特点&#xff08;2&#xff09;饿汉实现方式和懒汉实现方式&#xff08;i&#xff09;饿汉方式实现单例模式&#xff08;ii&#xff09;懒汉方式实现单例模式&#xff…

数据结构6.4——归并排序

基本思想&#xff1a; 归并排序是建立在归并操作上的一种有效的排序算法&#xff0c;该算法是采用分治法的一个非常典型的应用。将已有的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列有序&#xff0c;再使子序列段间有序。若将两个有序表合并成一个…

vue3+element-plus导航栏定位

一、父组件代码&#xff1a; <template> <div v-loading"loading" class"stock-detail" scroll"handleScroll"> <!-- tab导航栏 --> <navList :tabActive"activeIndex" :tabList"tabList" :tabStyle&…

数仓高频面试 | 数仓为什么要分层

大家好&#xff0c;我是大D呀。 关于数仓分层&#xff0c;在面试过程中几乎是必问的。不过&#xff0c;面试官一般也不会直接考你数仓为什么要分层&#xff0c;而是在你介绍项目时&#xff0c;可能会换一种形式来穿插着问&#xff0c;比如数据链路为什么要这样设计&#xff0c…

revit转gltf,revit转3dtiles,如何将Revit模型转为3DTiles格式并在Cesiumjs中高效可视化

Revit模型导出gltf、glb与3dtiles有多种方式&#xff0c;但一般的商业工具收费普遍较高&#xff1a;Cesiumlab导出3dTile格式数据&#xff0c;Cesiumlab暂时可试用3天&#xff0c;会员版收费每年800&#xff1b;BimAngleEngine导出3dTile格式数据BimAngleEngine暂时可试用30天&…

可视化建模与UML《部署图实验报告》

一、实验目的&#xff1a; 1、熟悉部署图的基本功能和使用方法。 2、掌握使用建模工具软件绘制部署图的方法 二、实验环境&#xff1a; window11 EA15 三、实验内容&#xff1a; 根据以下的描述&#xff0c;绘制部署图。 网上选课系统在服务器端使用了两台主机&#xff0c;一…

在CentOS中安装和卸载mysql

在CentOS7中安装和卸载mysql 卸载mysql1、查看是否安装过mysql2、查看mysql服务状态3、关闭mysql服务4、卸载mysql相关的rpm程序5、删除mysql相关的文件6、删除mysql的配置文件my.cnf 安装mysql1、下载mysql相关的rpm程序2、检查/tmp临时目录权限3、安装mysql前的依赖检查3、安…

三相电机不转,如何判断好坏?

在现代工业生产中&#xff0c;三相电机被广泛应用于各类机械设备中&#xff0c;由于其高效能和稳定性&#xff0c;成为驱动设备的首选。然而&#xff0c;在实际使用过程中&#xff0c;三相电机有时会出现不转动的情况&#xff0c;这不仅会影响生产效率&#xff0c;还可能对设备…

ChatGPT大模型 创作高质量文案的使用教程和案例

引言 随着人工智能技术的飞速发展,大语言模型如 ChatGPT 在创作文案、生成内容方面展现出了强大的能力。无论是个人用户还是企业用户,都可以利用 ChatGPT 提高工作效率、激发创意、甚至解决实际问题。本文将详细介绍 ChatGPT 如何帮助创作各类高质量文案,并通过具体案例展示…

使用ERA5数据绘制风向玫瑰图的简易流程

使用ERA5数据绘制风向玫瑰图的简易流程 今天需要做一个2017年-2023年的平均风向的统计,做一个风向玫瑰图&#xff0c;想到的还是高分辨率的ERA5land的数据&#xff08;0.1分辨率&#xff0c;逐小时分辨率&#xff0c;1950年至今&#xff09;。 风向&#xff0c;我分为了16个&…

软考:工作后再考的性价比分析

引言 在当今的就业市场中&#xff0c;软考&#xff08;软件设计师、系统分析师等资格考试&#xff09;是否值得在校学生花费时间和精力去准备&#xff1f;本文将从多个角度深入分析软考在不同阶段的性价比&#xff0c;帮助大家做出明智的选择。 一、软考的价值与局限性 1.1 …