ReactJS调用JSReport的Sending template API出现库错误该如何解决

问题原因 #

jsreport-client 是仅支持 Node.js 服务端环境的 SDK，依赖 fs、http、crypto 等 Node.js 原生内置模块，React 运行的浏览器环境不存在这些模块，因此直接在前端引入调用必然会抛出依赖缺失的错误。

解决方案 #

不需要使用官方的 Node 版客户端，直接通过标准 HTTP 请求调用 jsreport 公开的 REST 渲染接口即可，jsreport 所有能力都支持通过 API 直接调用，完全适配浏览器环境。

完整实现代码 #

import React from 'react';

// 替换为你实际的jsreport服务地址
const JSREPORT_SERVICE_URL = 'http://localhost:5488';

const reportParams = {
  template: {
    shortid: "2_Kw0BRuOm",
    recipe: "html-to-xlsx",
    data: {
      people: [{ name: "Omar rafat", age: "20", job: "Software Engineer" }],
    },
  },
};

class App extends React.Component {
  handleExport = async () => {
    try {
      const res = await fetch(`${JSREPORT_SERVICE_URL}/api/report`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          // 如果jsreport开启了身份验证，打开下方注释替换为你的账号密码
          // 'Authorization': 'Basic ' + btoa('admin:你的密码')
        },
        body: JSON.stringify(reportParams)
      });

      if (!res.ok) throw new Error('报表生成请求失败');

      // 将响应转为浏览器可识别的blob对象
      const fileBlob = await res.blob();
      const fileUrl = URL.createObjectURL(fileBlob);
      
      // 触发浏览器下载
      const downloadLink = document.createElement('a');
      downloadLink.href = fileUrl;
      downloadLink.download = '员工报表.xlsx'; // 自定义下载文件名
      document.body.appendChild(downloadLink);
      downloadLink.click();

      // 清理临时资源
      downloadLink.remove();
      URL.revokeObjectURL(fileUrl);
    } catch (err) {
      console.error('导出失败：', err);
    }
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.handleExport}>
          导出Excel报表
        </button>
      </div>
    );
  }
}

export default App;

注意事项 #

• 需提前在 jsreport 服务配置中开启 CORS 跨域权限，允许你的 React 应用域名访问，生产环境建议配置为实际前端域名，测试环境可临时设置允许所有域名访问。
• 如果 jsreport 服务开启了身份验证，需要在请求头中携带基础认证信息，参考代码中的注释部分配置即可。

内容的提问来源于stack exchange，提问作者Okira