CODEWITHSUNDEEP
angularuser-interfacepdfpdf-generationkendo-ui-angular2
alonso
alonso

Reputation: 321

Kendo PDF Angular does not read special characters

I am using Kendo to create a PDF, but I need to display special characters like 'Frío.' However, it doesn’t print correctly; it only shows 'FR˝O.'. How can I fix it?. I am using several fonts and many configurations.

Part of my code:

<kendo-pdf-export #pdf2 paperSize="letter" margin="0.4cm" landscape="true" forcePageBreak=".page-break" style="@font-face {
        font-family: 'DejaVuSans', Arial, sans-serif;
        src: url('https://kendo.cdn.telerik.com/2018.2.620/styles/fonts/DejaVu/DejaVuSans.ttf') format('truetype');
    };
    font-family: 'DejaVuSans', Arial, sans-serif;">
      <ng-template kendoPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
<div class="col-lg">
                <strong class="text-left text d-block mb-1" *ngIf="ClienteMolino && ClienteMolino != null">Cliente: {{ClienteMolino}}</strong>
                <!-- <strong style="font-family: 'Roboto', Arial, sans-serif;" class="text-left text d-block mb-1">Producto: {{Producto}}</strong> -->
                <strong style="font-family: 'Roboto', Arial, sans-serif;" class="text-left text d-block mb-1">
                    Producto: <span [innerHTML]="Producto"></span>
                </strong>
                <!-- <strong class="text-left text d-block mb-1" *ngIf="Spec && Spec != null">Especificacion y tipo: {{Spec}}</strong> -->
              </div>
</ng-template>
</kendo-pdf-export>

Upvotes: 0

Views: 61

Answers (1)

Yan-dev
Yan-dev

Reputation: 66

You need to embed fonts in the exported PDF that support the specific character. Check the official documentation for more details:

https://www.telerik.com/kendo-angular-ui/components/pdf-export/embedded-fonts

https://www.telerik.com/kendo-angular-ui/components/grid/export/pdf-export#embedding-custom-fonts

Code snippet:

import { Component } from '@angular/core';
import { InvoiceRow } from './invoice-row';
import { invoiceData } from './invoice-data';

@Component({
  selector: 'app-root',
  template: `
    <div class="example-config">
      <button kendoButton (click)="pdf.saveAs('invoice.pdf')">
        Save As PDF...
      </button>
    </div>

    <kendo-pdf-export #pdf paperSize="A4" margin="2cm">
      <app-invoice [data]="data"></app-invoice>
    </kendo-pdf-export>
  `,
  styles: [`
    @font-face {
      font-family: 'DejaVu Sans';
      src: url('assets/DejaVuSans.ttf') format('truetype');
    }

    kendo-pdf-export {
      font-family: "DejaVu Sans", "Arial", sans-serif;
      font-size: 12px;
    }
  `]
})
export class AppComponent {
  data: InvoiceRow[] = invoiceData;
}

Upvotes: 1

Related Questions