1.前端下載
(1)封裝工具類
utils/exportXLSX.tsx
import * as XLSX from 'xlsx';
/**
* 純前端將數據導出成XLSX文件
* @param {string} fileName 導出的XLSX文件名
* @param {string} sheetName 導出文件的sheetName
* @param {object} headers excel標題欄對象,如:{ name: '姓名', age: '年齡' },其interface要與數據對象相同
* @param {object[]} data 要導出的數據對象數組
*/
export function exportXLSX(
fileName: string = 'file',
sheetName: string = 'sheet1',
header: object,
data: object[],
) {
// 生成workbook
const workbook = XLSX.utils.book_new();
// 插入表頭
const headerData = [header, ...data];
// 生成worksheet
const worksheet = XLSX.utils.json_to_sheet(headerData, { skipHeader: true });
// 組裝
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
// 導出,就會直接下載
XLSX.writeFile(workbook, `${fileName}.xlsx`);
}
(2)頁面調用
exportForum({ids: selectedRowKeys}).then((res) => {
const { code, data } = res;
if(code === 200) {
let exportData = data.map((item:any) => {
let o={};
Object.keys(HeaderData).map((key) => o[key]=item[key]);
return o;
})
// 下載excel文件
exportXLSX('forum', 'forums', HeaderData, exportData);
this.setState({selectedRowKeys: []});
}
})
2.后端下載
(1)封裝工具類
app/controller/tools.js
'use strict';
const Controller = require('egg').Controller;
const XLSX = require('xlsx');
class ToolsController extends Controller {
async exportExcel() {
const { ctx } = this;
// 獲取參數
const { header, type } = ctx.query;
// 獲取數據
let result;
if(type === 'forum') {
result = await ctx.service.diary.find();
}
// 查詢結果為0時直接返回
if (result.count === 0) {
ctx.success({
data: { ...result },
});
return;
}
function pick(item, keys) {
let o={};
keys.map((key) => o[key]=item[key]);
return o;
}
// 生成數據
const data = result.rows.map(i => {
const item = pick(i, Object.keys(JSON.parse(header)));
return {
...item,
// userGroups: item.userGroups.join(','),
};
});
// 導出excel
await ctx.helper.exportXLSX('forum', 'forums', JSON.parse(header), data);
}
}
module.exports = ToolsController;
(2)頁面調用
// 全部下載excel數據
const exportAllForum = (params: object) => {
// 偽造a標簽點擊
const downloadUrl = `${BaseUrl}/tools/excel/export?header=${JSON.stringify(params['header'])}&type=${params['type']}`;
const a = document.createElement('a');
a.href = downloadUrl;
a.download = 'forum';
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
注意:必須是 GET 方式
