Home > Software engineering >  Resolution problem rendering large pdf with pdf.js
Resolution problem rendering large pdf with pdf.js

Time:01-30

I'm trying to display a quite large pdf on my website. Everything is exactly the same as the official demo, and it works well with the example file. But, when I used my file by adding ?file= parameter, the page refuse to redraw on any scale above 40%, so the preview looks blurry on normal scale (it still redraws when I change the scale from 20% to 30%, but when I switch to 100%, the page streches what it rendered in 40% into 100% scale, instead of rendering another image in 100%). The page size is 2766.8 x 2531.8mm (horizontal).

How should I modify the scripts in order to improve the maxium resolution to at least 100% ?

CodePudding user response:

In most (but NOT ALL) web browser based PDF viewers, calls to Acrobat or a clone viewer like PDF.js will require "suggested" magnification set as a fragment #zoom.

The limits accepted are fixed in two places,

  1. by the browser pdf extender range (often 8-6400%), and
  2. the browsers own allowed range of zoom (often 25-500%)

It does NOT have to be respected, since user controls their PDF extender viewing preferences thus only IF the download can return to the browser inline frame, which it does not have to, it can be directed at an external application/pdf viewer without the #zoom respected.

Here is that example with requested actual scale (also zoom in @200 and out @50) for test in main stream browsers with PDF extenders that return downloads to Browser.
Each click is potentially a fresh download, unless the browser reuses the same local cached file, which itself can cause other problems, e.g. when user has go to same page, settings active.

Normally the #zoom is after .pdf e.g. sample.pdf#zoom=percent but note the value here is passed to the HTML worker.

http://mozilla.github.io/pdf.js/web/viewer.html#zoom=200 http://mozilla.github.io/pdf.js/web/viewer.html#zoom=100 http://mozilla.github.io/pdf.js/web/viewer.html#zoom=50

Remember the scale is NOT guaranteed, especially if users browser or device has over-riding zoom settings.

CodePudding user response:

I've realized what happend after another day's work. In the original viewer.js, the resolution is not infinite. Instead, the canvas size is limited to 16M pixels:

  maxCanvasPixels: {
    value: 16777216, //16M
    kind: OptionKind.VIEWER
  },

For my case, I tried 256M pixels (since the png version of this file has 232M pixels). It does render a nice and clear preview with more pixels, but the rendering process runs very laggy and the browser itself is almost unresponsive.

  • Related