在前端業務中，經常遇到點選匯出資料的業務場景。一般我們直接可以用現成的js庫去做。xlsx.js 就是一個功能強大的js庫。可以使用它來完美解決我們的業務需求。
安裝& 使用
可以使用npm 安裝
npm i xlsx
或者使用yarn 安裝
yarn add xlsx
使用的話使用require匯入即可
const XLSX require('xlsx')
引入本地檔案
匯出單個sheet
這裏使用的是本地檔案
<!DOCTYPE html>
<html>
<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>
<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官方文件
