Vue实现导出Excel表格,提示“文件已损坏,无法打开”的解决方法

一、vue实现导出excel
1、前端实现

xlsx是一个用于读取、解析和写入Excel文件的JavaScript库。它提供了一系列的API来处理Excel文件。使用该库,你可以将数据转换为Excel文件并下载到本地。这种方法适用于在前端直接生成Excel文件的场景。

  • 安装xlsx依赖

    npm install xlsx --save

  • 引入并使用

    <template>
    <button @click="exportExcel">导出excel</button>
    </template> <script> import XLSX from 'xlsx' export default { methods: { exportExcel() { // 准备要导出的数据 const data = [ ['姓名','年龄','性别','地址'], ['张三',18,'男','北京市'], ['李四',19,'女','上海市'] ] // 将数据转换为工作簿对象 const ws = XLSX.utils.aoa_to_sheet(data) const wb = XLSX.utils.book_new() XLSX.utils.book_append_sheet(wb,ws,'Sheet1') // 导出Excel文件 XLSX.writeFile(wb,'test.xlsx') } } } </script>
2、后端实现

在这种方法中,前端发起一个请求到后端,后端生成Excel文件并返回给前端,前端再将文件下载到本地。可以使用axios库来发起请求,并使用Blob和a标签来下载文件。这种方法适用于需要在后端处理数据并生成Excel文件的场景。

  • 后端返回blob流文件,前端接收并导出。

    <template>
    <button @click="exportExcel">导出excel</button>
    </template> <script> import axios from 'axios' export default { methods: { exportToExcel() { this.$http.get('/api/exportExcel').then(res => { const blob = new Blob([res.data], {type: 'application/vnd.ms-excel'}) const link = document.createElement('a') link.style.display = 'none' link.href = URL.createObjectURL(blob) link.download = 'test.xlsx' document.body.appendChild(link) link.click() }); } } } </script>
二、导出文件损坏

前端开发中导出excel文件,文件可以正常下载,但是使用office或者wps

打开失败,提示"文件已损坏,无法打开"。

1、前端请求导出接口,增加返回类型

注意,excel流文件一定要在请求的时候加上响应类型字段,也就是:responseType: 'blob'或者,responseType: 'arraybuffer' ,否则下载出来的excel文件就会损坏,就会打不开。

  • axios发请求,给axios做了二次封装,在请求拦截器的地方添加。

    // 引入axios
    import axiosFile from "axios"
    // 创建axios实例
    const axiosExport = axiosFile.create()
    // request拦截器
    axiosExport.interceptors.request.use((req)=>{
    //添加响应类型
    req.responseType = "blob"
    return req
    })

2、取消受保护的视图

具体操作:打开excel文件,点击页面上方的左侧"文件",然后点击"更多"里面的"选项";在"信任中心"选择"信任中心设置";再点击"受保护的视图",取消选择右侧面板里面的勾选,最后点击"确定"。

  • 点击"选项"

  • 点击"信任中心"

  • 点击"受保护的视图"

  • 去掉右侧的选项,点击确定。

相关推荐
doll ~CJ2 天前
SQLite的BLOB数据类型与C++二进制存储学习记录
c++·sqlite·blob·图像数据存取·bitset标准库
盛夏绽放17 天前
导出Excel的常用方法:从前端到后端的全面指南
开发语言·前端·javascript·python·excel·xlsx
Prosper Lee3 个月前
React(五):XLS、XLSX文件在线预览
javascript·react.js·xlsx·table·xls
孟郎郎4 个月前
Python打开Excel文档并读取数据
python·excel·xlsx·openpyxl·xlrd·xls
唐诺4 个月前
vue页面中,通过接口获取json返回值,并导出到Excel中;
vue.js·json·excel·xlsx
唐诺5 个月前
Audio音频资源播放
音视频·audio·arraybuffer·audiocontext
SunFlower9145 个月前
axios设置 responseType为 “stream“流式获取后端数据
axios·xmlhttprequest·stream·fetch·responsetype·readablestream·流式接口
carfge6 个月前
axios下载接口后端返回了json但前端得到的是blob
前端·json·axios·blob·下载
善良的小猪6 个月前
QT跨平台读写Excel
qt·excel·xlsx
Ying(英子)8 个月前
vue项目:使用xlsx导出Excel数据
前端·vue.js·excel·xlsx·file-saver·数据导出为excel·vue数据导出