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.在项目中创建一个文件夹(比 ...
随机推荐
- CF446 (Div. 1)简单题解
A .DZY Loves Sequences pro:给定长度为N的序列,你最多可以改变一个数的值,问最长严格上升子序列长度. N<1e5. sol:分几种情况,一种的不改变: 一种是改变,然后 ...
- document.write中输出html标签用法
输出HTML标签,只需将标签写入双引号: 示例:在网页中输出<p>革命还在继续</p> document.write("<p style='border:1px ...
- HDU 1686：Oulipo（KMP模板，子串出现次数）
Oulipo Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- 更换JDK版本时的问题：Error: could not open `C:\Java\jre7\lib\amd64\jvm.cfg'
1.先把oracle自带的weblogic给卸载了,然后打开eclipse,发现报错了:Error: could not open `C:\Java\jre7\lib\amd64\jvm.cfg' J ...
- 博客 first
2016.10.28 这会是一个值得纪念的日子,我将会从此刻开始,1~2天不间断的更新我再软件,编程方面的学习历程和在大学的琐事. 希望N年后看到,能够回味. a good memery....... ...
- webapi core2.1 Identity.EntityFramework Core进行配置和操作数据 (一）没什么用
https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity?view=aspnetcore-2.1&am ...
- 【MAC】常用方法-持续更新
1.Homebrew安装 删除brew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ma ...
- ionic1实现热更新以版本检测更新安装包的方法
1.需要下载热更新插件:插件名称是cordova-hot-code-push 首先打开cli,执行命令 npm install -g cordova-hot-code-push-cli 此功能主要是为 ...
- UVA1455 【Kingdom】
分析 直线都是\(y=\overline{a.5}\)这种形式,而只查询州和城市的个数,所以很容易想到对\(y\)轴做投影,然后转化为区间修改(加减)和单点查询,可以用线段树维护.至于每个州只会合并不 ...
- Centos7部署ntp服务器同步时间以及直接将本地时间同步为北京时间
一.查看配置 查看时区列表: timedatectl list-timezones|grep Asia 查看当前时间: date 查看当前设置: [root@localhost ~]# timedat ...