vue中下载文件使用file-saver，文件错误excel无法打开

最新推荐文章于 2025-03-08 08:50:30 发布

豆包包不是豆包

最新推荐文章于 2025-03-08 08:50:30 发布

阅读量2.6k

点赞数 3

文章标签： excel javascript vue.js

本文链接：https://blog.csdn.net/doujingwei0825/article/details/127810030

版权

最近使用到了file-saver下载文件，通过axios调接口拿文件数据，再通过file-saver下载文件

但就在我成功下载文件并打开时，提示这个信息：

主要的原因就是没有设置响应的文件流类型为“blob”，加上后就可以打开了！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

豆包包不是豆包

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3，vue3 实现前端下载 xlsx；file-saver

jieweiwujie的博客

03-18

809

主要是将el-table的数据或者数组其他形式的数据下载为excel文件。

前端vue2中的excel导出功能-file-saver,xlsx,xlsx-style的使用

qq_33449702的博客

04-11

1535

* ./cptable in ./node_modules/xlsx-style/dist/cpexcel.js

参与评论您还未登录，请先登录后发表或查看评论

vue导出excel文件，wps提示无法打开文件，【responseType: ‘blob‘ 】

eadela的博客

08-08

2425

vue导出excel文件，wps提示无法打开文件，【responseType: 'blob' 】

VUE使用xlsx、file-saver做导出excel功能时报错TypeError: Cannot read properties of undefined (reading ‘utils‘)

velma_M的博客

04-06

1167

报这个错是说utils未定义，换一下版本就好了 1. npm install --save xlsx@0.17.0 2. npm install --save file-saver@2.0.5

Vue下载Excel后报错,或打不开

weixin_47230082的博客

02-09

2486

后端返回excel文件流后, 在Swagger 和 PostMan上进行下载测试均正常。但是在项目中下载打开却出现: WPS表格在试图打开文件时遇到错误.问题呢, 是我们在发送请求时,没有声明返回的responseType。

vue 下载文件，文件损坏无法打开

qq_38136325的博客

11-11

5246

最近通过 axios 接口下载文件的时候，文件不能打开，显示文件损坏是因为在接口请求体中缺少属性 responseType:'blob' export function downloadFileById (id) { return axios({ responseType: 'blob', url: urlHref + id, method: 'get' }) } ...

vue附件下载无法打开

王红珠的博客

07-14

1538

vue附件下载格式错误，无法打开

解决文件流导出为excel无法打开的问题

weixin_39150852的博客

07-23

8659

1.封装请求 export function filePost(url, params, config) { let userAuth = JSON.parse(sessionStorage.getItem("userAuth")); return new Promise((resolve, reject) => { axios.create({ baseURL: baseUrl, timeout: 15000,

vue el-table前端 file-saver 导出excel可导出分页数据.zip

12-11

3. **生成Excel文件**：使用`xlsx-style`库（因为`file-saver`不支持直接生成Excel格式，而是CSV），将合并后的数据转换为Excel格式。首先安装`xlsx-style`： ```bash npm install xlsx-style # 或 yarn add ...

Vue3技术实践：基于XLSX与File-Saver的Excel高效导出方案

最新发布

Html_vueJs的博客

03-08

708

在Vue3中整合xlsx与file-saver，开发者可通过组合式API封装高复用导出逻辑，结合响应式系统实现动态数据处理。建议根据项目需求选择技术方案：简单场景优先使用xlsx，复杂报表考虑exceljs，超大数据集推荐后端生成。

FileSaver.js用于table导出Excel

03-01

使用tableExport.js将table导出Excel时，必须用的Bootstrap中的FileSaver.js文档

vue基于file-saver处理二进制文件流,导出文件

WhyBecause的博客

08-10

1393

1、安装 npm install file-saver --save 2、引入 import { FileSaver} from ‘file-saver’; 3、调用 handleDownTemplate() { DownloadTemplate(this.searchForm.schoolCode).then((res) => { //取返回文件名 // const fileName = decodeURIComponent( // re

vue导出excel使用xlsx、file-saver、xlsx-style、yxg-xlsx-style 遇到的坑

一个有思想的新时代农民工的博客

09-29

2151

Error: Can‘t resolve ‘fs’ in export ‘default‘ (imported as ‘XLSX‘) was not found in ‘xlsx Error: Can‘t resolve ‘crypto’ in

前端导出excel文件，本地下载后无法打开或格式错误

成长之痛

03-05

7496

在处理前端下载文件的问题时，我们需要注意数据的格式、响应类型的设置以及如何正确地获取数据。同时，还需要关注项目中可能存在的响应拦截器，确保它们不会影响到我们的下载逻辑。通过仔细地排查和分析，我们可以找到问题的根源并解决它。

vue导出Excel格式 vue-json-excel file-saver xlsx

ranshakalove的博客

05-20

6730

vue导出Excel格式 vue-json-excel file-saver xlsx最近公司在写一个项目,需要把vue里面json数据导出成Excel 格式 ,在网上查了资料两种有实现方法个人推荐用第二种方法,虽然第一种比较方便,但是第二种可控性好第一种 :vue-json-excel在main.js种引入:第二种实现方法:第一步:安装依赖包: 最近公司在写一个项目,需要把vue里面json数据...

vue3 用xlsx 解决 excel 低版本office无法打开问题

喜大普奔

02-20

1146

文件，提示文件格式和扩展名不匹配，文件可能已损坏或不安全。，导致在笔记本office环境下，出现兼容性问题。文件，提示文件格式或文件扩展名无效。

js导出的xlsx无法打开_【js-xlsx和file-saver插件】前端导出数据到excel

weixin_39994461的博客

12-22

979

最近在做项目，前端进行处理数据，导出excel中，还是遇到不少问题，这里将其进行总结一下，博主是vue框架开发，借用file-saver和xlsx插件进行导出excel,我们来看下代码和效果。地址链接如下：https://www.npmjs.com/package/js-xlsx博主自己封装了一个方法xlsx.js，然后在vue中进行调用就行，如下：import fs from 'file-sav...

vue 下载.xlsx格式文件异常

zuotianxian的博客

03-20

400

1、如果调用后台接口返回的不是文件流，估计是接口中忘记设置返回类型responseType: 'blob',2、如果设置了还是下载异常，则需要对接口返回的文件流进行处理。到此就完美解决下载问题啦。

vue2下载请求后端流格式显示无法打开文件解决方案

weixin_63515766的博客

10-14

2647

vue2下载请求后端流格式显示无法打开文件解决方案

vue3 使用xlsx file-saver excel

09-11

Vue3 中使用 `xlsx` 和 `file-saver` 库将 Excel 文件导出数据的过程可以分为以下几个步骤： 1. **安装依赖**：首先，你需要在项目中安装这两个库，分别通过npm或yarn运行命令： ``` npm install xlsx file-saver --save 或者 yarn add xlsx file-saver ``` 2. **处理Excel文件**：在 Vue 组件内，引入 `xlsx` 和 `FileSaver.js` 的模块，然后你可以创建一个新的工作表 (`workbook`)，并添加数据。例如： ```javascript import XLSX from 'xlsx'; import saveAs from 'file-saver'; // 假设data是一个二维数组，代表了excel表格的数据 const data = ...; // 将数据转换为工作簿 const workbook = XLSX.utils.book_new(); const worksheet = XLSX.utils.aoa_to_sheet(data); // 将工作表添加到工作簿 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 'Sheet1' 是工作表名 // 将工作簿转换为Excel文件流 const buffer = XLSX.writeFile(workbook, 'output.xlsx'); ``` 3. **保存文件**：使用 `file-saver` 的 `saveAs()` 函数，将生成的 Excel 流保存为下载文件： ```javascript saveAs(new Blob([buffer], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}), 'export.xlsx'); ``` 这里指定的 `type` 是 Excel 文件的MIME类型。 4. **兼容性和注意事项**： - `xlsx` 提供了多种导出格式（如 `.xlsx`, `.xls`, 等），确保在支持的浏览器上运行。 - 如果需要异步操作或者处理大型数据集，可能需要优化读取和处理的方式。