PDF MultiLine (5.20192.631)

by LaAsCE

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 multiLine = true + wordWrap = true (version 5.20192.631) => NG
    </h1>
    <button id="btnCreateDoc" class="btn btn-default">
        Export PDF
    </button>
    <div id="theGrid"></div>
</div>

CSS

@font-face {
  font-family: ipaexg;
  src: url('https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf');
}

.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;
}

.wj-flexgrid .wj-cell{
  line-height: normal;
  
}

.wj-cell {
  font-family: ipaexg;
}

JavaScript

onload = function () {

    // create some random data
    var countries = '1measures for AB1234H56\n対策「XY1234Z'.split(',');
     //var countries_2 = '2measures for AB1234H56\r\n対策「XY1234Z」'.split(',');
      //var countries_3 = '3measures for AB1234H56\r対策「XY1234Z」'.split(',');
    var data = [];
    for (var i = 0; i < 10; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            //country_2: countries_2[i % countries_2.length],
            //country_3: countries_3[i % countries_3.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: 110, wordWrap: true, cssClass: 'custom-word-wrap' }
            //{ multiLine:true, binding: 'country_2', header: 'Country_2', width: 110, wordWrap: true, cssClass: 'custom-word-wrap' },
            //{ multiLine:true, binding: 'country_3', header: 'Country_3', width: 110, wordWrap: true, cssClass: 'custom-word-wrap' }
        ],
        itemsSource: data
    });
    // 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:...