antdPro - react 文档流下载

本次使用的是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函数
    }
  };

使用处

 [
           {
              exportExcel();
            }}
          >
            导出Excel 
          ,
        ]}
      >

页面效果

image.png