Dhtmlx甘特图导出到PDF中的反应

Question

我正在react中制作甘特图创建应用程序。我使用了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堆栈来做这个。

Answer 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 +出口(api.js_contents_included) . zip

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