React项目中Dhtmlx Gantt Chart导出PDF功能实现求助

前置说明 #

• 确认你安装的dhtmlx-gantt为完整版本，默认完整版自带导出扩展模块，精简版本需要单独补充引入导出相关的扩展文件
• 导出功能支持两种实现模式：
  • 公共导出服务：直接调用官方提供的公共导出接口，适合开发测试阶段使用
  • 私有导出服务：自行在服务端部署dhtmlx导出服务，适合生产环境使用，可避免业务数据外泄

具体代码实现 #

修改你的Gantt组件代码，新增导出逻辑如下：

import { Component, Fragment } from "react";
import { gantt } from "dhtmlx-gantt";
// 引入导出功能扩展模块
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_export.js";
import "./dhtmlxgantt_material.css";
import "./controls_styles.css";
import "./Gantt.css";

export default class Gantt extends Component {
  componentDidMount() {
    // 甘特图初始化
    gantt.init(this.gantt_here);
    gantt.load("/data");
    const dp = gantt.createDataProcessor({
      url: "/data",
      mode: "REST-JSON",
    });
    dp.init(gantt);
  }

  // PDF导出触发方法
  handleExportPDF = () => {
    gantt.exportToPDF({
      // 若使用私有部署的导出服务，此处替换为你自己的服务地址即可
      // url: "http://你的私有导出服务地址/export/pdf",
      name: "甘特图导出文件.pdf",
      // 传入自定义样式，保证导出格式和页面显示一致
      header: `<style>
        ${require("!raw-loader!./dhtmlxgantt_material.css").default}
        ${require("!raw-loader!./Gantt.css").default}
        ${require("!raw-loader!./controls_styles.css").default}
      </style>`,
      // 可选导出配置
      format: "A4", // 纸张尺寸
      orientation: "landscape", // 横向导出
      zoom: 1, // 缩放比例
      exportHiddenAreas: true, // 导出当前视图外的隐藏任务
    });
  }

  render() {
    return (
      <Fragment>
        {/* 新增导出按钮 */}
        <button onClick={this.handleExportPDF} style={{margin: "10px 0"}}>
          导出为PDF
        </button>
        <div
          ref={(input) => {
            this.gantt_here = input;
          }}
          style={{ width: "100%", height: "calc(100% - 40px)" }}
        ></div>
      </Fragment>
    );
  }
}

异常问题排查 #

• 样式缺失：需要先安装raw-loader依赖读取CSS原始内容，执行npm install raw-loader --save-dev即可
• 跨域报错：生产环境建议部署私有导出服务，开发阶段可在React代理配置中添加导出服务的代理规则
• 导出数据不全：确认exportHiddenAreas配置为true，会导出所有任务数据，包括当前视图外的内容

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