DevExtreme Angular - DataGrid

When exporting DataGrid 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 DataGrid 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 plugin. 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 exportDataGrid:

jQuery

index.js

$(() => {
    DevExpress.pdfExporter.exportDataGrid({
        jsPDFDocument: doc,
        component: gridComponent,
    }).then(() => {
        doc.save('Companies.pdf');
    });
})

Angular

app.component.ts

import { exportDataGrid } from 'devextreme-angular/common/export/pdf';

export class AppComponent {

    // ...
    exportDataGrid({
        jsPDFDocument: doc,
        component: gridComponent,
    }).then(() => {
        doc.save('Companies.pdf');
    });
}

Vue

App.vue

<script setup lang="ts">
import { exportDataGrid } from 'devextreme-vue/common/export/pdf';

// ...
exportDataGrid({
    jsPDFDocument: doc,
    component: gridComponent,
}).then(() => {
    doc.save('Companies.pdf');
});
</script>

React

App.tsx

import { exportDataGrid } from 'devextreme-react/common/export/pdf';

function App() {
    exportDataGrid({
        jsPDFDocument: doc,
        component: gridComponent,
    }).then(() => {
        doc.save('Companies.pdf');
    });
}