Dhtmlx甘特图在反应中导出为PDF答案

【问题标题】：Dhtmlx Gantt Chart export to PDF in reactDhtmlx甘特图在反应中导出为PDF
【发布时间】：2021-10-09 18:36:25
【问题描述】：

我正在制作一个甘特图创建应用程序。我为此使用了 Dhtmlx 甘特图库。我已尽力将甘特图导出为 pdf。但我无法做到这一点。请帮忙。如果您可以为此提供代码，我们将不胜感激。提前谢谢你。

import { gantt } from "dhtmlx-gantt";
import "./dhtmlxgantt_material.css";
import "./controls_styles.css";

import "./Gantt.css";

export default class Gantt extends Component {
  componentDidMount() {
 
    // ---------------------------------- gantt initialization ----------------------------------
    gantt.init(this.gantt_here);

    gantt.load("/data");

    var dp = gantt.createDataProcessor({
      url: "/data",
      mode: "REST-JSON",
    });
  }

  render() {
    return (
      <Fragment>
        <div
          ref={(input) => {
            this.gantt_here = input;
          }}
          style={{ width: "100%", height: "100%" }}
        ></div>
      </Fragment>
    );
  }
}

我正在使用 MERN 堆栈进行此操作。

【问题讨论】：

标签： reactjs gantt-chart dhtmlx

【解决方案1】：

要将数据导出为PDF，需要连接导出的api.js文件：

<script src="http://export.dhtmlx.com/gantt/api.js"></script>

https://docs.dhtmlx.com/gantt/desktop__export.html#exporttopdf

在 React 中，您需要导入该文件。不幸的是，现在，您需要将它放在位于node_modules/dhtmlx-gantt/codebase/ 文件夹中的dhtmlxgantt.js 文件附近。另一种方法是将该文件的内容添加到具有甘特图配置的文件中。

我有以下 React 演示来演示它是如何工作的：

在这个演示中，你需要将api.js从src复制到node_modules/dhtmlx-gantt/codebase/： https://files.dhtmlx.com/30d/9f1198f54ba3138e66a6877e35d7366e/react+export_7.0.1.zip

在这个演示中，文件的内容被添加到带有甘特图配置的页面中： https://files.dhtmlx.com/30d/d5b7c3f1be578bc533bd11e3d60e5d7c/react+export(api.js_contents_included).zip

在 7.2 版本中，该文件将包含在 dhtmlxgantt.js 文件中，因此您根本不需要连接该文件。

【讨论】：