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