New to Telerik UI for ASP.NET Core? Download free 30-day trial

Displaying Glyph Characters when Using PDFViewer

Environment

Product Telerik UI for ASP.NET Core PDFViewer
Progress Telerik UI for ASP.NET Core version Created with the 2023.2.718 version

Description

How can I load and display a PDF file that contains glyph characters in the Telerik UI for ASP.NET Core PDFViewer?

Solution

The PDF standard fonts cover only the basic ASCII character set. By design, if no alternate fonts are specified, Kendo UI will bundle the DejaVu font family. For this reason, if the PDF file contains glyph characters, they will not be rendered correctly when loading the file into the PDFViewer.

The following example showcases how to proceed when the PDF file contains Simplified Chinese characters.

  1. Include the 'SimSun' font family by using the CSS font-face declaration.

        <style>
            @@font-face {
                font-family: 'SimSun';
                    src: url('/SimSun-01.ttf') format('truetype');
                }
    
            #example {
                font-family: 'SimSun'; // Use the SimSun font for displaying and embedding in the PDF file.
            }
        </style>
    
  2. Specify the Character Mapping files (CMap) in the PDFViewer declaration, which are used in the PDF.js library to map the 'SimSun' characters to their corresponding Unicode code points. Use the CMapUrl() and CMapPacked() opions.

        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
        <script>
            window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
        </script>
    
        <div id="example">
            @(Html.Kendo().PDFViewer()
                .Name("pdfviewer")
                .PdfjsProcessing(pdf => pdf
                    .File(c => c
                        .CMapUrl("https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/")
                        .CMapPacked(true)
                        .Url(Url.Content("~/Example.pdf"))
                    )
                )
                .Height(1200)
            )
        </div>
    
        @addTagHelper *, Kendo.Mvc
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
        <script>
            window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
        </script>
    
        <div id="example">
            <kendo-pdfviewer name="pdfviewer" height="1200">
                <pdfjs-processing 
                    c-map-url="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/" 
                    c-map-packed="true" 
                    file="@Url.Content("~/Example.pdf")" />
            </kendo-pdfviewer>
        </div>
    

More ASP.NET Core PDFViewer Resources

See Also

In this article