vue 导出excel 多个sheet
<!DOCTYPE html>
<html lang="en">
<head></head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.full.min.js"></script>
</head>
<body>
<script>
// 数据
let data = { '基本信息': [{name: '李四', sex: 'nan', age: 12}], '成绩': [{class: '计算机', teacher: 'Mrs wang', score: 90}] };
let columnHeaders = { '基本信息': ['name', 'sex', 'age'], '成绩': ['class', 'teacher', 'score']}
outputXlsxFile(
data,
[{ wch: 50 }, { wch: 50 }, { wch: 10 }],
"test-xlsx"
); function outputXlsxFile(data, wscols, xlsxName) {
let sheetNames = [];
let sheetsList = {};
const wb = XLSX.utils.book_new(); for (let key in data) {
sheetNames.push(key);
let columnHeader = columnHeaders[key] // 此处是每个sheet的表头
let temp = transferData(data[key], columnHeader);
sheetsList[key] = XLSX.utils.aoa_to_sheet(temp);
sheetsList[key]["!cols"] = wscols;
} wb["SheetNames"] = sheetNames;
wb["Sheets"] = sheetsList; XLSX.writeFile(wb, xlsxName + ".xlsx");
} function transferData(data, columnHeader) {
let content = [];
content.push(columnHeader);
data.forEach((item, index) => {
let arr = [];
columnHeader.map(column =>{
arr.push(item[column]);
})
content.push(arr);
});
return content;
}
</script>
</body>
</html>
<script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.full.min.js"></script>
vue 导出excel 多个sheet的更多相关文章
- CRM 报表导出excel时指定sheet名
如图所示,设置PageName即可: 这样导出excel时,sheet的名就有了:
- 项目笔记：导出Excel功能分sheet页插入数据
导出Excel功能分sheet页处理数据: /*导出EXCEL*/ public void createExcel() { log.info("导出Excel功能已经启动-BEGIN&quo ...
- C# 导出Excel 多个Sheet
以下代码中最关键的代码是 Worksheet mSheet = (Microsoft.Office.Interop.Excel.Worksheet)mBook.Worksheets.Add(miss, ...
- vue 导出excel表格
对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...
- vue导出Excel文件
1.需要安装file-saver和script-loader.xlsx npm install file-saver / yarn add file-saver npm install script- ...
- 【vue开发】vue导出Excel表格教程&demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
- 个人推荐的两款vue导出EXCEL插件
个人认为前端VUE项目中导出EXCEL比较好的两种方法,均不是我个人原创,我只是收录简单说明,原创地址在下面. 下面推荐两种方法,个人推荐第一种,第二种不做详细讲解,因为作者已经写过博客了,你们可以点 ...
- vue 导出excel后端返回乱码下载不了的解析问题
有俩种方法可以用 第一种方法: 解析:直接解析并且下载后端的乱码 this.download('后端给的导出excel的方法', { ...this.queryParams }, ` ...
- vue 导出excel
1.安装三个依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loader 2.在项目中创建一个文件夹(比 ...
随机推荐
- CodeForces - 1097F：Alex and a TV Show （bitset & 莫比乌斯容斥）
Alex decided to try his luck in TV shows. He once went to the quiz named "What's That Word?!&qu ...
- 洛谷P2568 GCD（线性筛法）
题目链接:传送门 题目: 题目描述 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. 输入输出格式 输入格式: 一个整数N 输出格式: 答案 输入输出样例 ...
- P2261 [CQOI2007]余数求和 （数论）
题目链接:传送门 题目: 题目背景 数学题,无背景 题目描述 给出正整数n和k,计算G(n, k)=k mod + k mod + k mod + … + k mod n的值,其中k mod i表示k ...
- HPU组队赛J：Ball King（线段树）
时间限制 1 Second 内存限制 512 Mb 题目描述 HPU601球王争霸赛即将举行,ACMER纷纷参加. 现在有n个人报名参赛,每个人都有一个实力值 ai,实力值较大者获胜. 为保证比赛公 ...
- HDU 1159：Common Subsequence（LCS模板）
Common Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- 2017.4.9 函数式编程FP
函数编程(简称FP)不只代指Haskell Scala等之类的语言,还表示一种编程范式,和面向对象的编程方式一样,是编程思维,软件思考方式,也称面向函数编程. 编程的本质是组合,组合的本质是范畴Cat ...
- review
一.123 第二部分:面向对象 . 谈谈你对面向对象的认识. . 约束 Java: - 接口,约子类中必须包含某个方法(约束). Interface IMessage: def func1(self) ...
- js获取元素得几种情况
HTML代码 <div class="divClass" name="myClass"> <input type="password ...
- vue中在页面渲染完之后获取元素（否则动态渲染的元素获取不到）
两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...
- mac 终端光标在单词之间移动
https://ruby-china.org/topics/1241#reply16 you can use : option + b / f not ctrl + <- / ->