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

• ASP.NET Core PDFViewer Documentation

• ASP.NET Core PDFViewer Demos

• ASP.NET Core PDFViewer Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the PDFViewer for ASP.NET Core
• Server-Side API Reference of the PDFViewer for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base