gantt.exportToPDF is not a function

Gantt
#1

I’ve set export_api: true in the gantt.plugins, but trying to call gantt.exportToPDF is hitting a “not a function” error. I’m on DHTMLX Gantt version 7.1.9, Professional Edition. Is there other setup I’m missing in order to use the “export to PDF” feature?

image

#2

Hello Paul,
The way of adding the export functionality via the plugins method was added only in the 8.0 version. For older versions, you need to connect the export’s api.js file:
https://docs.dhtmlx.com/gantt/migrating.html#:~:text=resource%20assignments%20section.-,Export%20service,-From%20v8.0%2C%20the

We’ll add the information for older versions to the articles.

#3

Hi Ramil,

Gotcha, plugins method is only for version 8.0 and newer. Think I still need some more help or info on connecting the api.js file. Here’s my setup and what I’ve done so far:

  • I’ve recently transitioned to using webpack, and to play nice, I’m now connecting to a local copy of dhtmlx (see package.json screenshot below - this local copy is v7.1.9 Professional Edition)
  • I’ve tried adding a script tag to both https://export.dhtmlx.com/gantt/api.js and a local copy of the api.js file, but I’m still seeing the “gantt.exportToPDF is not a function” error. Not sure if different setup is required when using a local copy of dhtmlx.
  • There’s a dhtmlxgantt.js file under ..\gantt_7.1.9\codebase, and I’m trying to manually connect an import statement to a local api.js file. But the dhtmlxgantt.js file is minified and doesn’t seem to be playing nice either.

image

i.e. While using a local minified copy of dhtmlx (v7.1.9 Professional Edition), is it possible to connect to the api.js or do I need to upgrade to v8.0?

#4

Hello Paul,
When you use Gantt in frameworks like Angular or Vue, you need to import the api.js file or its contents on the page with the Gantt configuration. It shouldn’t be hard to do that. But it is not convenient, so the dev team added a way to activate that functionality via the plugins method.

I have the following demos that show how it can be done:

Angular 12 + export:
https://files.dhtmlx.com/30d/2be4367b5f775926c51b7e979309eefb/angular12+export.zip
https://files.dhtmlx.com/30d/956c2711876b4199605b2ca49f927581/angular12+export+GanttInstance.zip

React + Export:
Here, the contents of api.js. file is included:
https://files.dhtmlx.com/30d/d5b7c3f1be578bc533bd11e3d60e5d7c/react+export(api.js_contents_included).zip

Here, 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

Vue + export PDF:
https://files.dhtmlx.com/30d/4438fb8d015aa12ea5a7c4c87650d818/vue+export.zip