Customizing Fonts

The default fonts in the PDF files do not provide Unicode support.

To render international characters in the KendoReact Data Grid, embed an external font. For more information, refer to the article on custom fonts and PDF export and to the following example.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';
import { GridPDFExport } from '@progress/kendo-react-pdf';
import { products } from './products.js';
import { styles } from './styles.js';

class App extends React.Component {
    gridPDFExport;
    total = products.length;
    pageSize = 5;

    state = {
        data: products.slice(0, this.pageSize),
        skip: 0,
        exporting: false
    };

    render() {
        const grid = (
            <Grid
                total={this.total}
                pageSize={this.pageSize}
                onPageChange={this.pageChange}
                data={this.state.data}
                skip={this.state.skip}
                pageable={true}
            >
                <GridToolbar>
                    <button
                        title="Export PDF"
                        className="k-button k-primary"
                        onClick={this.exportPDF}
                        disabled={this.state.exporting}
                    >
                        Export PDF
                    </button>
                </GridToolbar>
                <Column field="ProductID" title="ID" width="50px" />
                <Column field="ProductName" title="Name" width="300px" />
                <Column field="Category.CategoryName" title="Category" />
                <Column field="UnitPrice" title="Price" />
                <Column field="UnitsInStock" title="In stock" />
                <Column field="Discontinued" title="Discontinued" />
            </Grid>
        );

        return (
            <div>
                {grid}
                <GridPDFExport
                    ref={(element) => { this.gridPDFExport = element; }}
                    margin="1cm" >
                    {grid}
                </GridPDFExport>
                <style>{styles}</style>
            </div>
        );
    }

    pageChange = (event) => {
        this.setState(this.createState(event.page.skip, event.page.take));
    }

    createState(skip, take) {
        return {
            data: products.slice(skip, skip + take),
            skip: skip
        };
    }

    exportPDF = () => {
        // Simulate a response from a web request.
        setTimeout(() => this.gridPDFExport.save(products, this.pdfExportDone), 250);

        this.setState({ exporting: true });
    }

    pdfExportDone = () => {
        this.setState({ exporting: false });
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /