JavaScript/jQuery Gantt - Export Data
The Gantt component allows you to export its data in PDF format. This feature requires the jsPDF library to export data and the jsPDF-AutoTable plugin to create tables in exported files.
To configure export operations, use the exportGantt(options) method from the pdfExporter module.
You can call this method at any point in your application. In this example, this method is called in a standalone toolbar item's onClick event handler:
App.vue
- <template>
- <DxGantt ... >
- <DxToolbar>
- <!-- ... -->
- <DxItem
- :options="exportButtonOptions"
- widget="dxButton"
- />
- </DxToolbar>
- <!-- ... -->
- </DxGantt>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import 'devexpress-gantt/dist/dx-gantt.css';
- import {
- DxGantt,
- DxToolbar,
- DxItem
- // ...
- } from 'devextreme-vue/gantt';
- import { jsPDF } from 'jspdf';
- import 'jspdf-autotable';
- import { exportGantt as exportGanttToPdf } from 'devextreme/pdf_exporter';
- const ganttRef = 'gantt';
- export default {
- components: {
- DxGantt,
- DxToolbar,
- DxItem
- // ...
- },
- data() {
- return {
- exportButtonOptions: {
- hint: 'Export to PDF',
- icon: 'exportpdf',
- stylingMode: 'text',
- onClick: () => {
- this.exportGantt();
- },
- },
- };
- },
- computed: {
- gantt() {
- return this.$refs[ganttRef].instance;
- },
- },
- methods: {
- exportGantt() {
- exportGanttToPdf({
- component: this.gantt,
- createDocumentMethod: (args) => new jsPDF(args),
- format: 'a4',
- exportMode: 'all',
- dateRange: 'visible',
- }).then((doc) => doc.save('gantt.pdf'));
- },
- },
- };
- </script>
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.