Dhtmlx Gantt Chart export to PDF in react

Question

I'm making a Gantt chart creation application in react. I used the Dhtmlx Gantt Chart library for this. I have tried my best to export the Gantt chart as a pdf. but I wasn't able to do that. please help. if you can provide a code for this it is much appreciated. Thank you in advance.

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>
    );
  }
}

I'm doing this using the MERN stack.

Answer 1

To export the data to PDF, you need to connect the export's api.js file:

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

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

In React, you need to import that file. Unfortunately, right now, you need to put it near the dhtmlxgantt.js file that is located in the node_modules/dhtmlx-gantt/codebase/ folder. Another way is to add the contents of that file into the file with the Gantt configuration.

I have the following React demos that demonstrate how it works:

In this demo, you need to copy the api.js from src to node_modules/dhtmlx-gantt/codebase/: https://files.dhtmlx.com/30d/9f1198f54ba3138e66a6877e35d7366e/react+export_7.0.1.zip

In this demo, the contents of the file is added to the page with the Gantt configuration: https://files.dhtmlx.com/30d/d5b7c3f1be578bc533bd11e3d60e5d7c/react+export(api.js_contents_included).zip

In the 7.2 version, that file will be included in the dhtmlxgantt.js file, so you won't need to connect the file at all.