📦 集成到第三方项目

您可以将此库作为 npm 包安装并在您的 React 项目中使用。

安装

npm install @wsc-tech/guanshi-report-editor

关键：使用 LanguageProvider 包裹应用

注意：ReportDesigner 和 ReportViewer 组件依赖于国际化上下文 LanguageProvider。因此，在引入这些组件时，必须在它们的外层（或者应用的根节点）包裹 <LanguageProvider>，否则组件将无法正常运行并报错。

示例代码

以下是一个完整的集成示例，展示了如何正确地初始化和使用设计器组件：

import React, { useState } from 'react';
import { 
  LanguageProvider, 
  ReportDesigner, 
  printReport,
  ReportSchema 
} from '@wsc-tech/guanshi-report-editor';
// import '@wsc-tech/guanshi-report-editor/dist/style.css'; // 如有样式文件导出请引入

const ReportDesignerPage = () => {
  // 模拟的业务数据，用于打印预览
  const [reportData] = useState({
    "vol_arch_code": "2023-ARCH-001",
    "tableData": [
      { "NO": "1", "Title": "示例文件1", "Date": "2023-01-15" },
      { "NO": "2", "Title": "示例文件2", "Date": "2023-02-15" }
    ]
  });

  // 处理打印事件
  const handlePrint = (currentReport: ReportSchema) => {
    // 调用内置的打印工具函数，传入当前的报表设计和业务数据
    printReport(currentReport, reportData);
  };

  return (
    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
      <ReportDesigner 
        onPrint={handlePrint} 
        className="h-full w-full"
      />
    </div>
  );
};

// 导出时确保包裹 LanguageProvider
const App = () => {
  return (
    <LanguageProvider>
      <ReportDesignerPage />
    </LanguageProvider>
  );
};

export default App;

组件 API 说明

<ReportDesigner />

报表设计器组件。

• onPrint: (report: ReportSchema) => void
  • 当用户点击工具栏上的“打印”按钮时触发的回调。您可以在此处调用 printReport 函数。
• onSave: (report: ReportSchema) => void
  • 当用户点击“保存”按钮时触发。
• initialReport: ReportSchema (可选)
  • 用于加载初始的报表模板数据。

printReport(report, data)

手动触发打印预览的工具函数。

• report: ReportSchema - 报表结构定义。
• data: any - 填充到报表中的数据对象。

<ReportViewer />

纯预览组件，用于只读展示报表。

import { ReportViewer } from '@wsc-tech/guanshi-report-editor';

<ReportViewer 
  report={myReportSchema} 
  data={myData} 
/>