vue项目中使用 SheetJS / js-xlsx 导出文件
2024-10-19 16:23:43
1. npm install xlsx
2. 在App.vue 中引入xlsx
import * as XLSX from 'xlsx'; // 数据导出导入所需要的依赖
3. 使用xlsx
3.1 新建一个工作簿 workBook
3.2 生成一个工作表 sheet
3.3 在工作簿中添加工作表
3.4 导出 .xlsx文件
//1. 新建一个工作簿
let workbook = XLSX.utils.book_new();
//2. 生成一个工作表,
//2.1 aoa_to_sheet 把数组转换为工作表
let sheet1 = XLSX.utils.aoa_to_sheet(data1);
//2.2 把json对象转成工作表
let sheet2 = XLSX.utils.json_to_sheet(data2);
//3.在工作簿中添加工作表
XLSX.utils.book_append_sheet(workbook, sheet1, 'sheetName1'); //工作簿名称
XLSX.utils.book_append_sheet(workbook, sheet2, 'sheetName2'); //工作簿名称
// XLSX.utils.sheet_add_json(sheet1,data2);//把已存在的sheet中数据替换成json数据
//4.输出工作表,由文件名决定的输出格式
XLSX.writeFile(workbook, 'workBook1.xlsx'); // 保存的文件名
全部代码如下:
<template>
<div id="app">
<p>vue use xlsx</p>
</div>
</template> <script>
import * as XLSX from 'xlsx'; // 数据导出导入所需要的依赖
export default {
name: 'app',
data() {
return {}
},
mounted() {
this.exportExcle();
},
methods: {
/**
* workbook 工作簿
* sheet 工作表
* cellAddress Excel引用样式(单元格地址)
* cell 单元格
* */
exportExcle() {
var data1 = [
["id", "name", "value"],
[1, "sheetjs", 7262],
[2, "js-xlsx", 6969]
]; var data2 = [{
周一: '语文',
周二: '数学',
周三: '历史',
周四: '政治',
周五: '英语'
},
{
周一: '数学',
周二: '数学',
周三: '政治',
周四: '英语',
周五: '英语'
},
{
周一: '政治',
周二: '英语',
周三: '历史',
周四: '政治',
周五: '数学'
},
]; //1. 新建一个工作簿
let workbook = XLSX.utils.book_new();
//2. 生成一个工作表,
//2.1 aoa_to_sheet 把数组转换为工作表
let sheet1 = XLSX.utils.aoa_to_sheet(data1);
//2.2 把json对象转成工作表
let sheet2 = XLSX.utils.json_to_sheet(data2);
//3.在工作簿中添加工作表
XLSX.utils.book_append_sheet(workbook, sheet1, 'sheetName1'); //工作簿名称
XLSX.utils.book_append_sheet(workbook, sheet2, 'sheetName2'); //工作簿名称
// XLSX.utils.sheet_add_json(sheet1,data2);//把已存在的sheet中数据替换成json数据
//4.输出工作表,由文件名决定的输出格式
XLSX.writeFile(workbook, 'workBook1.xlsx'); // 保存的文件名
}
}
}
</script> <style>
#app {
text-align: center;
}
</style>
把vue项目运行到浏览器,浏览器会强制下载导出的文件:
打开文件,sheet内容如下;
如果使用了 XLSX.utils.sheet_add_json(sheet1,data2) ,文件内容如下:
参考链接:
[1] https://github.com/rockboom/SheetJS-docs-zh-CN
[2] https://www.cnblogs.com/lvsk/p/11970747.html
[3] https://www.jianshu.com/p/0244100c93b0
最新文章
- JsonResult作为Action返回值时的错误
- [poj2182] Lost Cows (线段树)
- Atitit 文档资料管理同步解决方案
- Windows下安装paramiko
- ng指令之 ng-repeat 篇
- python语言的优点和缺点
- history命令显示出详细时间
- FFT结果的物理意义
- css实现鼠标移入table时出现滚动条且table内容不移位
- sql server中的索引详情
- python 接口自动化测试--代码实现(八)
- nodejs 使用mongoose 操作mongodb
- Linnux入门之简介
- 交叉编译7zip过程
- SpringBoot集成spring-data-jpa注入Bean失败
- AES加解密所遇问题
- MongoDB 安装及副本集简单操作
- JSON与XML的区别比较(转)
- ubuntu(14.04) 下配置重写
- 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)