Vue实现导出Excel表格文件提示“文件已损坏无法打开”的解决方法
作者：邹荣乐
xlsx用于读取解析和写入Excel文件的JavaScript库,它提供了一系列的API处理Excel文件,使用该库,可以将数据转换Excel文件并下载到本地,适用于在前端直接生成Excel文件,这篇文章主要介绍了Vue实现导出Excel表格,提示文件已损坏,无法打开的解决方法,需要的朋友可以参考下
一、vue实现导出excel
1、前端实现
xlsx是一个用于读取、解析和写入Excel文件的JavaScript库。它提供了一系列的API来处理Excel文件。使用该库，你可以将数据转换为Excel文件并下载到本地。这种方法适用于在前端直接生成Excel文件的场景。
安装xlsx依赖
npm install xlsx --save
引入并使用
<template>
<div>
<button @click="exportExcel">导出excel</button>
</div>
</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>
<div>
<button @click="exportExcel">导出excel</button>
</div>
</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文件，点击页面上方的左侧“文件”，然后点击“更多”里面的“选项”；在“信任中心”选择“信任中心设置”；再点击“受保护的视图”，取消选择右侧面板里面的勾选，最后点击“确定”。
点击“选项”
点击“信任中心”
点击“受保护的视图”
去掉右侧的选项，点击确定。
到此这篇关于Vue实现导出Excel表格，提示“文件已损坏，无法打开”的解决方法的文章就介绍到这了,更多相关Vue导出Excel表格提示文件已损坏，无法打开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！