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 方式