做物流网站费用,百度搜索推广平台,河北建筑工程信息网站,做网站的就业前景文章目录 一、vue实现导出excel1、前端实现1、安装xlsx依赖2、引入3、方法4、使用4.1、将一个二维数组转成sheet4.2、将一个对象数组转成sheet4.3、合并单元格4.4、一次导出多个sheet 5、支持的文件格式 2、后端实现 二、导出文件损坏1、前端请求导出接口#xff0c;增加返回类… 文章目录 一、vue实现导出excel1、前端实现1、安装xlsx依赖2、引入3、方法4、使用4.1、将一个二维数组转成sheet4.2、将一个对象数组转成sheet4.3、合并单元格4.4、一次导出多个sheet 5、支持的文件格式 2、后端实现 二、导出文件损坏1、前端请求导出接口增加返回类型2、取消受保护的视图 一、vue实现导出excel
1、前端实现
xlsx是一个用于读取、解析和写入Excel文件的JavaScript库。它提供了一系列的API来处理Excel文件。使用该库你可以将数据转换为Excel文件并下载到本地。这种方法适用于在前端直接生成Excel文件的场景。
更多介绍可参见官网
1、安装xlsx依赖
npm install xlsx --save2、引入
import XLSX from xlsx3、方法 aoa_to_sheet: 这个工具类最强大也最实用了将一个二维数组转成sheet会自动处理number、string、boolean、date等类型数据 table_to_sheet: 将一个table dom直接转成sheet会自动识别colspan和rowspan并将其转成对应的单元格合并 json_to_sheet: 将一个由对象组成的数组转成sheet。
4、使用
4.1、将一个二维数组转成sheet
templatedivbutton clickexportExcel导出excel/button/div
/templatescript
import XLSX from xlsx
export default {methods: {exportExcel() {// 准备要导出的数据二维数组const data [[姓名,年龄,性别,地址],[张三,18,男,北京市],[李四,19,女,上海市]]// 创建sheet对象const ws XLSX.utils.aoa_to_sheet(data)// 创建一个工作薄const wb XLSX.utils.book_new()// 将sheet对象放入到工作薄XLSX.utils.book_append_sheet(wb,ws,Sheet1)// 导出Excel文件 XLSX.writeFile(wb,test.xlsx)}}
}
/script4.2、将一个对象数组转成sheet
exportExcel() {// 准备要导出的数据对象数组let sheetData [{ 姓名: 张三, 年龄: 18 ,性别:男,地址:北京市},{ 姓名: 李四, 年龄: 19 ,性别:女,地址:上海市},]// 创建sheet对象let sheet XLSX.utils.json_to_sheet(sheetData)// 创建一个工作薄let wb XLSX.utils.book_new()// 将sheet对象放入到工作薄XLSX.utils.book_append_sheet(wb, sheet, Sheet1)// 导出Excel文件 XLSX.writeFile(wb,data.xlsx)
}4.3、合并单元格
sheet[!merges] [{e: { c: 1, r: 0 }, // 合并结束位置 s: { c: 0, r: 0 } // 合并开始位置}
]c:列位置 r:表示行位置从0开始。 上面的代码表示合并第1行的第1列和第2列。 4.4、一次导出多个sheet
XLSX.utils.book_append_sheet(wb, sheet1, sheetName1)
XLSX.utils.book_append_sheet(wb, sheet2, sheetName2)
XLSX.utils.book_append_sheet(wb, sheet3, sheetName3)5、支持的文件格式 2、后端实现
在这种方法中前端发起一个请求到后端后端生成Excel文件并返回给前端前端再将文件下载到本地。可以使用axios库来发起请求并使用Blob和a标签来下载文件。这种方法适用于需要在后端处理数据并生成Excel文件的场景。
后端返回blob流文件前端接收并导出。
templatedivbutton clickexportExcel导出excel/button/div
/templatescript
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 nonelink.href URL.createObjectURL(blob)link.download test.xlsxdocument.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 blobreturn req
})2、取消受保护的视图
具体操作打开excel文件点击页面上方的左侧“文件”然后点击“更多”里面的“选项”在“信任中心”选择“信任中心设置”再点击“受保护的视图”取消选择右侧面板里面的勾选最后点击“确定”。 点击“选项” 点击“信任中心” 点击“受保护的视图” 去掉右侧的选项点击确定。
