在前端业务中,经常遇到点击导出数据的业务场景。一般我们直接可以用现成的js库去做。xlsx.js 就是一个功能强大的js库。可以使用它来完美解决我们的业务需求。
安装& 使用
- 可以使用npm 安装
npm i xlsx
或者使用yarn 安装
yarn add xlsx
使用的话使用require导入即可
const XLSX require('xlsx')
- 引入本地文件
点击下载xlsx.min.js
导出单个sheet
这里使用的是本地文件
<!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>Document</title>
</head>
<body>
<button>导出Excel</button>
</body>
<script src="./package/dist/xlsx.full.min.js"></script>
<script>
const btn = document.querySelector('button')
/**
*
* @param sheetData 数组表格数据
* @param fileName 文件名
*/
function exportFile(sheetData, fileName) {
// 将由对象组成的数组转化成sheet
const sheet = XLSX.utils.json_to_sheet(sheetData)
// 创建虚拟的workbook
const wb = XLSX.utils.book_new()
// 把sheet添加到workbook中
XLSX.utils.book_append_sheet(wb, sheet)
XLSX.writeFile(wb, `${fileName}.xls`)
}
btn.onclick = function () {
const table_data = [
{
name: '张三',
age: 18,
sex: '男',
},
{
name: '李四',
age: 20,
sex: '女',
},
]
exportFile(table_data, '人员信息')
}
</script>
</html>
点击导出Excel按钮,即可下载excel文件
导出多个sheet
我们看到XLSX.utils.book_append_sheet
这个方法,append理解就是添加的意思,所以可以多次调用这个方法去添加sheet,这个方法的第三个参数是sheet的名字,不写默认是sheet1,sheet2…
<!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>Document</title>
</head>
<body>
<button>导出Excel</button>
</body>
<script src="./package/dist/xlsx.full.min.js"></script>
<script>
const btn = document.querySelector('button')
/**
*
* @param sheetData 数组表格数据
* @param fileName 文件名
*/
function exportFile2(sheetData, fileName) {
let workbookBlob
// 创建虚拟的workbook
let wb = XLSX.utils.book_new()
for (let i = 0; i < sheetData.length; i++) {
const item = sheetData[i]
// 将由对象组成的数组转化成sheet
const sheet = XLSX.utils.json_to_sheet(item.data)
// 把sheet添加到workbook中
XLSX.utils.book_append_sheet(wb, sheet, item.sheet)
}
XLSX.writeFile(wb, `${fileName}.xlsx`)
}
btn.onclick = function () {
const table_data2 = [
{
data: [
{
name: '张三',
age: 18,
sex: '男',
},
{
name: '李四',
age: 20,
sex: '女',
},
],
sheet: '中国',
},
{
data: [
{
name: 'tom',
age: 18,
sex: '男',
},
{
name: 'mary',
age: 20,
sex: '女',
},
],
sheet: '外国',
},
]
exportFile2(table_data2, '人员信息')
}
</script>
</html>
导出的Excel格式如下
其他功能可以查看xlsx.js官方文档:xlsx.js官方文档