文章目录
- 一、vue实现导出excel
- 1、前端实现
- 1、安装xlsx依赖
- 2、引入
- 3、方法
- 4、使用
- 4.1、将一个二维数组转成sheet
- 4.2、将一个对象数组转成sheet
- 4.3、合并单元格
- 4.4、一次导出多个sheet
- 5、支持的文件格式
- 2、后端实现
- 二、导出文件损坏
- 1、前端请求导出接口,增加返回类型
- 2、取消受保护的视图
一、vue实现导出excel
1、前端实现
xlsx是一个用于读取、解析和写入Excel文件的JavaScript库。它提供了一系列的API来处理Excel文件。使用该库,你可以将数据转换为Excel文件并下载到本地。这种方法适用于在前端直接生成Excel文件的场景。
更多介绍可参见官网
1、安装xlsx依赖
npm install xlsx --save
2、引入
import XLSX from 'xlsx'
3、方法
-
aoa_to_sheet: 这个工具类最强大也最实用了,将一个二维数组转成sheet,会自动处理number、string、boolean、date等类型数据;
-
table_to_sheet: 将一个table dom直接转成sheet,会自动识别colspan和rowspan并将其转成对应的单元格合并;
-
json_to_sheet: 将一个由对象组成的数组转成sheet。
4、使用
4.1、将一个二维数组转成sheet
4.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流文件,前端接收并导出。
二、导出文件损坏
前端开发中导出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文件,点击页面上方的左侧“文件”,然后点击“更多”里面的“选项”;在“信任中心”选择“信任中心设置”;再点击“受保护的视图”,取消选择右侧面板里面的勾选,最后点击“确定”。
-
点击“选项”
-
点击“信任中心”
-
点击“受保护的视图”
-
去掉右侧的选项,点击确定。
-
- axios发请求,给axios做了二次封装,在请求拦截器的地方添加。
- 后端返回blob流文件,前端接收并导出。
-
-
猜你喜欢
- 14天前(a级景区评定机构)全国A级旅游景区创建与提升培训班在敦煌市举办
- 14天前(希尔顿2021活动)希尔顿集团618盛夏大促开启
- 14天前(大理悦云雅阁酒店电话)雅阁酒店集团|端午佳节礼遇,大理悦云雅阁度假酒店
- 14天前(香港航空三亚航线复航了吗)香港航空三亚航线复航
- 14天前(新西兰“空降”上海:新西兰旅游局邀请你来“玩真的”!)新西兰“空降”上海:新西兰旅游局邀请你来“玩真的”!
- 14天前(苏梅岛普吉岛哪个好玩)苏梅岛金普顿基塔蕾度假酒店推出家庭度假套餐
- 14天前(上海迪士尼 夏天)酷爽夏日,奇妙相伴!来上海迪士尼度假区清凉入夏
- 14天前(新西兰旅游局×时差岛:黄觉的“长白云之乡”奇遇)新西兰旅游局×时差岛:黄觉的“长白云之乡”奇遇
- 14天前(泛舟诗海觅春迹什么意思)泛舟觅桃源,又一头部机构下场文旅赛道
- 14天前(阿斯塔纳航空属于哪个联盟)阿斯塔纳航空荣获Skytrax世界航空公司大奖,将继续助力中哈交流往来
网友评论
- 搜索
- 最新文章
- (2020广州车展哈弗)你的猛龙 独一无二 哈弗猛龙广州车展闪耀登场
- (哈弗新能源suv2019款)智能科技颠覆出行体验 哈弗重塑新能源越野SUV价值认知
- (2021款全新哈弗h5自动四驱报价)新哈弗H5再赴保障之旅,无惧冰雪护航哈弗全民电四驱挑战赛
- (海南航空现况怎样)用一场直播找到市场扩张新渠道,海南航空做对了什么?
- (visa jcb 日本)优惠面面俱到 JCB信用卡邀您畅玩日本冰雪季
- (第三届“堡里有年味·回村过大年”民俗花灯会活动)第三届“堡里有年味·回村过大年”民俗花灯会活动
- (展示非遗魅力 长安启源助力铜梁龙舞出征)展示非遗魅力 长安启源助力铜梁龙舞出征
- (阿斯塔纳航空公司)阿斯塔纳航空机队飞机数量增至50架
- (北京香港航班动态查询)香港快运航空北京大兴新航线今日首航
- (我在港航“呵护”飞机 每一次安全着陆就是最好的荣誉)我在港航“呵护”飞机 每一次安全着陆就是最好的荣誉
- 热门文章