利用js-xlsx纯前端操作excel文件
由于最近公司项目考虑后端性能问题，而且数据量不是很大，考虑使用前端来下载导出excel文件。ps:后端同学太懒...
js-xlsl github地址
文件下载
1、直接下载zip文件，找到dist目录中
image.png
xlsx.core.min.js此文件是精简版，能够满足大部分开发需求
xlsx.full.min.js此文件是完整版
2、使用npm下载包
npm install xlsx
使用该包
第一种方式导入的：全局对象XLSX
第二种：let xlsx = require(XLSX);
数据导出：
<!DOCTYPE html>
<html>
<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>demo</title>
<script src="./xlsx.core.min.js"></script>
</head>
<body>
<script>
var data = [{ 主页: "111", 名称: "6800", 数量: "6800", 昵称: "广告主网" }, { 主页: "433", 名称: "6800", 数量: "6800", 昵称: "广告主网" }, { 名称: "22", 商家: "6800", 数量: "6800", 昵称: "广告主网", }, { 名称: "43", 商家: "6800", 数量: "6800", 昵称: "广告主网", }, { 店家: "43", 价格: "6800", 数量: "6800", 昵称: "广告主网", }];
</script>
<button id="down" onclick="exportExcel('asd')">导出</button>
<script>
function exportExcel(excelname){
var self = this;
var _data = [
[ "id", "name", "value" ],
[ 1, "sheetjs", 7262 ],
[ 2, "js-xlsx", 6969 ]
];
var worksheet = XLSX.utils.aoa_to_sheet(_data);
var new_workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(new_workbook, worksheet, excelname?excelname:"SheetJS");
XLSX.writeFile(new_workbook, excelname?(excelname+'.xlsx'):"sheetjs.xlsx");
}
</script>
</body>
</html>
导出Excel加上遮罩层
在js-xslx中读写操作是同步，不是异步的，那么直接在
writeFile之前加上遮罩层 之后取消遮罩层
showMask();
XLSX.writeFile(new_workbook, excelname?(excelname+'.xlsx'):"sheetjs.xlsx");
unMask();
网友评论