1.准备工作
- 随便新建一个文件夹：
mkdir import-excel && cd import-excel - 新建
index.js和index.html - 然后
yarn init初始化一个包管理仓库（git bash初始化失败可以用cmd）
2.下载xlsx插件
yarn add xlsx- 下载完当前目录是这样的
3.开始使用
编写Html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>导出excel</title>
<!-- 1.引入xlsx插件 -->
<script src="./node_modules/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
<!-- 2.写一个导出按钮 -->
<button onclick="importExcel()">导出</button>
<!-- 3.引入主要js文件 -->
<script src="./index.js"></script>
</body>
</html>
编写主要JS脚本
- 引入
xlsx后在window上可以看到多了XLSX变量
XLSX上有utils对象，调用XLSX.utils.book_new()创建一个空工作簿.XLSX.utils.json_to_sheet(json)创建一个工作表sheet.XLSX.utils.book_append_sheet(book, sheet, sheetName)加入工作表,可append多个XLSX.writeFile(book, "XX.xlsx")写入并导出excel
function importExcel() {
let book = XLSX.utils.book_new();
let sheetData = [{ id: "xxx", 性别: "男", 名称: "测试", 电话: 18888888888 }];
let sheet = XLSX.utils.json_to_sheet(sheetData);
XLSX.utils.book_append_sheet(book, sheet, "用户");
XLSX.writeFile(book, "导出模板.xlsx");
}
结束
这里展示了xlsx插件在浏览器端简单的导出excel，更多玩法可以去github上看，有很多其他用法demo。
