最近在項目中對於後臺的表格都要提供下載功能,這裏基於 XLSX
和 file-saver
庫實現一個表格保存爲Excel文件的方法。
定義數據類型
列數據
interface Col {
name: string; // 列名(表格的第一行)
key: string; // 關鍵字
}
// 例如 { name: '姓名', key: 'name' }
表格數據
表格數據應該是根據列數據 key
值的一個數組,如果列數據爲:
[
{ name: '姓名', key: 'name' },
{ name: '年齡', key: 'age' },
{ name: '性別', key: 'sex' },
]
則對應的表格數據應該爲:
[
{ name: '張三', age: 24, sex: '男' },
{ name: '李四', age: 25, sex: '女' },
{ name: '王五', age: 26, sex: '男' },
]
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
interface Col {
name: string; // 列名
key: string; // 關鍵字
}
/**
* 格式化處理數據
*
* @param {Col[]} cols 列數據
* @param {*[]} templateData 表格數據
* @returns {[string[], ...*[]]} 格式化處理後的數據
*/
function getTemplateData(cols: Col[], templateData: any[]): [string[], ...any[]] {
const data: any[] = [];
const names: string[] = [];
cols.forEach((item) => {
names.push(item.name);
},
);
templateData.forEach((row) => {
const newRow: any[] = [];
cols.forEach((item) => {
newRow.push(row[item.key]);
});
data.push(newRow);
});
return [names, ...data];
}
/**
* 下載表格
*
* @param {Col[]} cols 列數據
* @param {*[]} templateData 表格數據
* @param {String} fileName 保存的文件名
*/
function downloadExcel(cols: any[], templateData: any[], fileName = '示例.xlsx'): void {
const workbook = XLSX.utils.book_new();
const workbookOptions: any = { bookType: 'xlsx', bookSST: false, type: 'array' };
const ws = XLSX.utils.aoa_to_sheet(getTemplateData(cols, templateData));
XLSX.utils.book_append_sheet(workbook, ws, 'Sheet1');
const workbookOut = XLSX.write(workbook, workbookOptions);
saveAs(new Blob([workbookOut], { type: 'application/octet-stream' }), fileName);
}
export { downloadExcel, Col };