本次使用的是antdPro,地址：https://procomponents.ant.design/components/
项目目录结构：
image.png
1 node端需要配置你的转发规则 （如果调用接口是跨区才需要配置转发）
// router处
let code = {
// 导出码库列表
match: `{你的转发规则}/code/export`,
controller: "api.code.download",
method: "all",
}
module.exports = code;
你的controllers里
var config = require("../../config");
mo.export={
....
download: function* () {
let newUrl = this.req.url.replace("这里是你的转发匹配规则", ""); // 比如： api/code，作用是替换掉你的匹配规则，使用后端的接口域名
yield this.proxy({
url: config.code + newUrl, // 这里的 config.code 是配置的对应的后段接口域名地址
needPipeRes: true,
});
},
....
}
静态端
sever.js 配置
export async function exportCodeStock(params) {
// 导出
return request(`${'这里是你的转发规则'}/code/export`, { // 调用这个接口后，匹配到node端配置的转发规则后，就可以调用接口啦
method: 'POST',
data: params,
responseType: 'blob', // 需要指定文档流类型
});
}
业务文件处理
const saveFileAs = (data) => {
const link = document.createElement('a'); // 创建一个a标签
const body = document.querySelector('body');
link.href = URL.createObjectURL(data); // 生成文档流对应的链接地址
link.style.display = 'none';
link.download = '列表.xlsx'; // 需要指定文件名和类型
body.appendChild(link); // 写入页面
link.click(); // 模拟点击
body.removeChild(link); // 删除标签
};
const exportExcel = async () => { // 异步调用
const data = formRef.current?.getFieldValue(); // 从antd 搜索框获取导出需要传的参数（看接口是否需要，也可不要）
data.id = id;
const { data: res } = await exportCodeStock(data); // 执行导出接口
if (res) {
message.success(lanCommon('success', '操作成功')); // 弹框提示，使用message，需要先导入到文件后才能使用
saveFileAs(res); // 拿到的文档流塞入 saveFileAs函数
}
};
使用处
<ProTable
...
toolBarRender={() => [
<Button
type="primary"
key="export"
onClick={() => {
exportExcel();
}}
>
导出Excel
</Button>,
]}
></ProTable>
页面效果
image.png
