当前位置:首页 » 《我的小黑屋》 » 正文

Vue.js 中,前端如何处理从后端返回的 Excel 文件流

4 人参与  2024年09月17日 13:20  分类 : 《我的小黑屋》  评论

点击全文阅读


目的:页面中点击按钮实现下载excel文件

步骤:

向后端发送请求: 使用 axios(或其他 HTTP 客户端)向后端发送请求以获取文件。通常,文件会以 Blob 形式返回。

处理响应数据: 将响应数据(Blob 对象)处理为下载链接,并模拟点击以触发下载。

具体步骤:

1. 安装 axios(如果还未安装)

npm install axios

2. 编写 Vue 组件
<template>  <div>    <button @click="downloadExcel">下载 Excel</button>  </div></template><script>import axios from 'axios';export default {  methods: {    async downloadExcel() {      try {        const response = await axios({          url: '/api/path-to-your-excel-file', // 替换为实际的请求 URL          method: 'GET',          responseType: 'blob', // 重要:指定响应类型为 blob        });        // 创建一个新的 URL 对象,并生成一个下载链接        const url = window.URL.createObjectURL(new Blob([response.data],        { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));        const link = document.createElement('a');        link.href = url;        link.setAttribute('download', '文件名.xlsx'); // 设置下载的文件名        link.style.display = 'none' // 隐藏元素        document.body.appendChild(link);        link.click();                // 清理 DOM 和释放 URL 对象        document.body.removeChild(link);        window.URL.revokeObjectURL(url);      } catch (error) {        console.error('下载文件时出错:', error);      }    }  }}</script><style scoped>/* 样式代码 */</style>

备注1:

在Vue中处理后端返回的Excel文件流以供下载,可以通过以下步骤进行:

 

设置请求的响应类型‌:当后端以流文件的方式返回文件时,前端在请求时需要设置responseType: 'blob',以确保正确接收和处理文件流。这是因为Blob对象可以表示一段二进制数据,用于处理二进制文件,如Excel文件‌。

创建下载链接‌:一旦接收到Blob数据,可以通过创建一个临时的URL来触发下载。使用window.URL.createObjectURL(blob)方法可以创建一个表示该Blob对象的临时URL,然后创建一个<a>标签,设置其href属性为这个临时URL,并设置download属性为期望的文件名,模拟点击这个<a>标签即可开始下载‌。

处理不同的请求方法‌:根据后端接口的要求,请求方法可能是POST或GET。如果是POST请求,需要在请求头中设置responseType: 'blob'。如果是GET请求,则通常不需要显式设置响应类型,因为默认就是获取数据‌。

兼容性考虑‌:虽然可以通过上述方法处理和下载文件,但不同的浏览器和下载方式(如通过<a>标签或window.location)有不同的兼容性。例如,通过<a>标签下载的方式在Firefox和Chrome中表现良好,但不支持IE和Safari。而通过window.location进行下载虽然简单,但只能进行GET请求,且在有token校验的情况下使用不便‌。

注意事项‌:在处理流文件时,需要注意文件的完整性和正确性。如果文件损坏,可能是因为请求时没有设置正确的响应类型,导致文件无法正确解析和打开‌。

综上所述,处理Vue中后端返回的Excel文件流涉及正确的请求设置、临时URL的创建、兼容性考虑以及注意事项,以确保文件能够正确下载和使用。

备注2:

type 是在创建 Blob 对象时的一个选项,用来指定 Blob 数据的 MIME 类型。MIME 类型(Multipurpose Internet Mail Extensions type)是用来描述文件格式的标准方式,它帮助浏览器或其他应用程序了解如何处理该文件。

在你的例子中:

const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
response 是你的数据内容(通常是从服务器获得的原始数据)。type 是指定 Blob 对象的 MIME 类型。

解释 type 的值

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 是一个 MIME 类型,用于标识 Microsoft Excel 的 .xlsx 文件格式。

为什么需要指定 MIME 类型

浏览器处理: 浏览器根据 MIME 类型决定如何处理或展示 Blob。如果没有指定 MIME 类型,浏览器可能无法正确识别文件类型,可能会导致下载或展示时出现问题。

文件处理: 正确的 MIME 类型有助于确保文件以正确的方式被处理和下载。例如,当你下载 Excel 文件时,指定 MIME 类型可以确保文件被正确地识别为 Excel 文件。

下载和展示: 如果你的应用需要处理多种文件格式,指定 MIME 类型可以确保文件的处理和展示方式是正确的。

常见的 MIME 类型

文本文件text/plainHTML 文件text/htmlJSON 文件application/jsonCSV 文件text/csvExcel 文件application/vnd.openxmlformats-officedocument.spreadsheetml.sheetPDF 文件application/pdf

在创建 Blob 对象时,正确指定 MIME 类型是确保文件处理和下载正确的关键一步。


点击全文阅读


本文链接:http://zhangshiyu.com/post/160931.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 祖母寿宴,侯府冒牌嫡女被打脸了(沈屿安秦秀婉)阅读 -
  • 《雕花锦年,昭都旧梦》(裴辞鹤昭都)完结版小说全文免费阅读_最新热门小说《雕花锦年,昭都旧梦》(裴辞鹤昭都) -
  • 郊区41号(许洛竹王云云)完整版免费阅读_最新全本小说郊区41号(许洛竹王云云) -
  • 负我情深几许(白诗茵陆司宴)完结版小说阅读_最热门小说排行榜负我情深几许白诗茵陆司宴 -
  • 九胞胎孕妇赖上我萱萱蓉蓉免费阅读全文_免费小说在线看九胞胎孕妇赖上我萱萱蓉蓉 -
  • 为保白月光,侯爷拿我抵了债(谢景安花田)小说完结版_完结版小说全文免费阅读为保白月光,侯爷拿我抵了债谢景安花田 -
  • 陆望程映川上官硕《我的阿爹是带攻略系统的替身》最新章节阅读_(我的阿爹是带攻略系统的替身)全章节免费在线阅读陆望程映川上官硕
  • 郑雅琴魏旭明免费阅读_郑雅琴魏旭明小说全文阅读笔趣阁
  • 头条热门小说《乔书意贺宴临(乔书意贺宴临)》乔书意贺宴临(全集完整小说大结局)全文阅读笔趣阁
  • 完结好看小说跨年夜,老婆初恋送儿子故意出车祸_沈月柔林瀚枫完结的小说免费阅读推荐
  • 热推《郑雅琴魏旭明》郑雅琴魏旭明~小说全文阅读~完本【已完结】笔趣阁
  • 《你的遗憾与我无关》宋怀川冯洛洛无弹窗小说免费阅读_免费小说大全《你的遗憾与我无关》宋怀川冯洛洛 -

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1