Where to set CMap ?

[Tomomi]

PDF Viewer is implemented using ASP.NET MVC4.
While watching the demo page, I wrote the following code.

``` index.cshtml
@* scripts for PdfjsProcessing *@
<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>

@* PDF Viewer block *@
<div id="example">
    @(Html.Kendo().PDFViewer().Name("pdfviewer")
        .PdfjsProcessing(pdf =>
        {
            pdf.File(Url.Content($"~/api/PdfViewer/LoadProgress/{progressPdf}"));
        })
    )
</div>
<style>
    html body #pdfviewer {
        width: 100% !important;
    }
</style>
```

When executed, the PDF Viewer component appears to be working, but the contents are pure white and nothing is displayed.
However, if I click the "Download" button, the file will be saved, and if I open the file, it will have the contents.
Opening the browser's developer tools and looking at the console log showed the following warning:

> Warning: Error during font loading: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

Apparently, font processing is not working well.
Where should I set "cMapUrl" and "cMapPacked" ?

[Veselin Tsvetanov]

Hi Tomomi,

I would suggest you review the following StackOverflow thread, which discusses the case in question:

https://stackoverflow.com/questions/32764773/what-is-a-pdf-bcmap-file

What you would need to do is to set the path to the bcmap files from PDF.js:

PDFJS.cMapUrl = '../web/cmaps/';

In order to avoid any cross-domain request issues, I would suggest you to get PSF.js from NPM and serve it locally in your application (node_modules\pdfjs-dist\cmaps).

Regards,
Veselin Tsvetanov
Progress Telerik

[Tomomi]

Tsvetanov, thank you for your answer.

I read an article on StackOverflow.
In addition, viewer.js included with PDF.js also wrote the following code in the same way.
----------------------------------------
    PDFJS.workerSrc = 'pdf.worker.js';
    PDFJS.cMapUrl = '/ pdfjs / web / bcmaps /';
    PDFJS.cMapPacked = true;
----------------------------------------
So I thought I could do the same thing, but I can't find the PDFJS global object.

When I searched, I saw some articles that PDF.js became version 2 and PDFJS global objects were abolished.
Kendo UI PDF Viewer specifies workerSrc like this, PDFJS is not used.
----------------------------------------
    window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
----------------------------------------

So where is PDFJS (or another equivalent object) that sets cMapUrl and cMapPacked?
- Get through the methods of the pdfjsLib object?
- Is it in another object that is not pdfjsLib?
- Can't I get it with Kendo UI PDF Viewer?

[Veselin Tsvetanov]

Hi Tomomi,

Thank you for the additional info on the case. I will need a bit more time to research whether global configuration would be possible in PDF.js v 2. I will come back to you, as soon as I know something more on that matter.

Regards,
Veselin Tsvetanov
Progress Telerik

[Veselin Tsvetanov]

Hello Tomomi,

Here are my findings on the discussed.

As you have correctly noted, with version 2 of PDF.js, the global configuration object PDFJS is no longer used. Having that said, the cMap configuration is directly passed to the pdfjsLib.getDocument() method call, as explained in the following GitHub issue:

https://github.com/mozilla/pdf.js/issues/11214#issuecomment-538932555

As the cMap configuration is part of the actual file configuration, that could be directly injected in the PDFViewer config in the following way:

$("#pdfViewer").kendoPDFViewer({
  pdfjsProcessing: {
    file: {
      url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf",
      cMapUrl: '../../node_modules/pdfjs-dist/cmaps/',
      cMapPacked: true
    }
  },
  width: "100%",
  height: 1200
})

Please, note that at this stage you would need to initialize the PDFViewer with JavaScript (as shown above), as the extended configuration of the file object is not available in the HTML helper. Here you will find a GitHub issue on enhancing the PDFViewer configuration so that it includes the above options:

https://github.com/telerik/kendo-ui-core/issues/5521

As a small token of gratitude for bringing the above to our attention, I have updated your Telerik points.

Regards,
Veselin Tsvetanov
Progress Telerik

[Tomomi]

Thanks Tsvetanov.

ah I see. Going back to the basics, it should have been initialized with JavaScript.
Not many languages use cMap. However, if the HTML helper can easily handle cMaps, it may help more engineers. (especially Japanese engineers ;-)

I'll try it now.
That was a really big help. Thank you very much.
Next I'll do my best to help someone.

[Veselin Tsvetanov]

Hi Tomomi,

We have already added the task for extending the HTML (and the other server helpers) to allow the cMap configuration. As soon as our priority queue allows it, we will provide that feature.

Thank you again for the input provided!

Regards,
Veselin Tsvetanov
Progress Telerik