DevExtreme React - Gantt

When exporting Gantt data to PDF, some characters may be displayed incorrectly in the generated file.

PDF supports a set of fonts that are limited to the ASCII characters. If you want to use UTF-8 characters, you need to supply a font that includes the required glyphs. This tutorial demonstrates how to add custom fonts to your Gantt PDF exports.

Choose a Font and Encode It in Base64

Choose a font that includes the characters you want to display in your PDF exports.

To export data, use the jsPDF and jsPDF-AutoTable plugins. To add a font to jsPDF exports, encode the font file as a Base64 string and assign it to a variable:

JavaScript
const robotoRegular = "AAEAAAASAQAABAAgR0RFRqZDpEwAAAOUAAACWEdQT1MH0trkAABd6AAAWMB ... "

Add the Font to a jsPDF Instance

To add a font file to a jsPDF instance, implement the following jsPDF methods:

Set the addFileToVFS() method's contents parameter to the Base64-encoded font:

JavaScript
const doc = new jsPDF();

doc.addFileToVFS("Roboto-Regular.ttf", robotoRegular);
doc.addFont("Roboto-Regular.ttf", "Roboto", "normal");
doc.setFont("Roboto");

Assign this jsPDF instance to the jsPDFDocument property of exportGantt:

jQuery
index.js
$(() => {
    DevExpress.pdfExporter.exportGantt({
        jsPDFDocument: doc,
        component: ganttComponent,
    }).then(() => {
        doc.save('Tasks.pdf');
    });
})
Angular
app.component.ts
import { exportGantt } from 'devextreme-angular/common/export/pdf';

export class AppComponent {

    // ...
    exportGantt({
        jsPDFDocument: doc,
        component: ganttComponent,
    }).then(() => {
        doc.save('Tasks.pdf');
    });
}
Vue
App.vue
<script setup lang="ts">
import { exportGantt } from 'devextreme-vue/common/export/pdf';

// ...
exportGantt({
    jsPDFDocument: doc,
    component: ganttComponent,
}).then(() => {
    doc.save('Tasks.pdf');
});
</script>
React
App.tsx
import { exportGantt } from 'devextreme-react/common/export/pdf';

function App() {
    exportGantt({
        jsPDFDocument: doc,
        component: ganttComponent,
    }).then(() => {
        doc.save('Tasks.pdf');
    });
}

Implement the Font in exportGantt()

As an alternative, you can use the GanttExportOptions.font property to add a font to your PDF exports. Assign a Base64-encoded font file to font.fontObject and specify font.name:

jQuery
index.js
$(() => {
    DevExpress.pdfExporter.exportGantt({
        jsPDFDocument: doc,
        component: ganttComponent,
        font: {
            fontObject: robotoRegular,
            name: 'Roboto',
        },
    }).then(() => {
        doc.save('Tasks.pdf');
    });
})
Angular
app.component.ts
import { exportGantt } from 'devextreme-angular/common/export/pdf';

export class AppComponent {

    // ...
    exportGantt({
        jsPDFDocument: doc,
        component: ganttComponent,
        font: {
            fontObject: robotoRegular,
            name: 'Roboto',
        },
    }).then(() => {
        doc.save('Tasks.pdf');
    });
}
Vue
App.vue
<script setup lang="ts">
import { exportGantt } from 'devextreme-vue/common/export/pdf';

// ...
exportGantt({
    jsPDFDocument: doc,
    component: ganttComponent,
    font: {
        fontObject: robotoRegular,
        name: 'Roboto',
    },
}).then(() => {
    doc.save('Tasks.pdf');
});
</script>
React
App.tsx
import { exportGantt } from 'devextreme-react/common/export/pdf';

function App() {
    exportGantt({
        jsPDFDocument: doc,
        component: ganttComponent,
        font: {
            fontObject: robotoRegular,
            name: 'Roboto',
        },
    }).then(() => {
        doc.save('Tasks.pdf');
    });
}
See Also