Export PDF (5.20192.631)

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/controls/wijmo.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/controls/wijmo.grid.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20192.631/styles/wijmo.min.css">
<div class="container">
    <h1>
        Export PDF dynamic font + Word Wrap (5.20192.631)
    </h1>
    <button id="btnCreateDoc" class="btn btn-default">
        Export PDF
    </button>
    <div id="theGrid"></div>
</div>

CSS

.custom-word-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

JavaScript

onload = function () {

    // create some random data
    var countries = 'あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえ,abcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcdeabcde,日本語日本語日本語日本語日本語日本語日本語日本語日本語日本語日本語日本語日本語日本語日本語'.split(',');
    var data = [];
    for (var i = 0; i < 10; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }

    // show the data in a grid
    var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        //autoRowHeights: true,
        columns: [
            { binding: 'id', header: 'ID', width: 60, wordWrap: true, cssClass: 'custom-word-wrap' },
            { binding: 'country', header: 'Country', width: 150, wordWrap: true, cssClass: 'custom-word-wrap' }
        ],
        itemsSource: data
    });


    // set row height
    theGrid.rows.defaultSize = 50;

    // add a filter to show that it works while exporting
    var f = new wijmo.grid.filter.FlexGridFilter(theGrid);

    var exportSettings =
    {
        maxPages: 10,
        scaleMode: wijmo.grid.pdf.ScaleMode.PageWidth,
        customCellContent: true,
        documentOptions: {
            compress: true,
            header: { declarative: { text: '\t&[Page] of &[Pages]' } },
            footer: { declarative: { text: '\t&[Page] of &[Pages]' } },
            info: { author: 'C1', title: 'Learn Wijmo' }
        },
        embeddedFonts: [
            {
                source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf',
                name: 'ipaexg',
                style: 'normal',
                weight: 'normal',
                sansSerif: true
            }
        ],
        styles: {
            cellStyle: {
                backgroundColor: '#ffffff',
                borderColor: '#c6c6c6',
                font: {
                    family: 'ipaexg'
    ...