Displaying Glyph Characters when Using PDFViewer

Environment

Product	Telerik UI for ASP.NET MVC PDFViewer
Progress Telerik UI for ASP.NET MVC 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 MVC 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>
   

More ASP.NET MVC PDFViewer Resources

• ASP.NET MVC PDFViewer Documentation

• ASP.NET MVC PDFViewer Demos

• ASP.NET MVC PDFViewer Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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