How to improve display quality in pdf.js

Question

I'm using open source library for PDF documents from mozilla(pdf.JS). When i'm trying to open pdf documents with bad quality, viewer displays it with VERY BAD quality.

But if I open it in reader, or in browser (drag/drop into new window), whis document displays well

Is it possible to change? Here is this library on github mozilla pdf.js

Answer 1

You just have to change the scaling of your pdf i.e. when rendering a page:

pdfDoc.getPage(num).then(function(page) {
      var viewport = page.getViewport(scale);
      canvas.height = viewport.height;
      canvas.width = viewport.width;
...

It is the scale value you have to change. Then, the resulting rendered image will fit into the canvas given its dimensions e.g. in CSS. What this means is that you produce a bigger image, fit it into the container you had before and so you effectively improve the resolution.

Answer 2

There is renderPage function in web/viewer.js and print resolution is hard-coded in there as 150 DPI.

function renderPage(activeServiceOnEntry, pdfDocument, pageNumber, size) {
  var scratchCanvas = activeService.scratchCanvas;
  var PRINT_RESOLUTION = 150;
  var PRINT_UNITS = PRINT_RESOLUTION / 72.0;

To change print resolution to 300 DPI, simply change the line below.

var PRINT_RESOLUTION = 300;

See How to increase print quality of PDF file with PDF.js viewer for more details.

Answer 3

Maybe it's an issue related with pixel ratio, it used to happen to me when device pixel ratio is bigger than 1 (for example iPhone, iPad, etc.. you can read this question for a better explanation.

Just try that file on PDF.js Viewer. If it works like expected, you must check how PDF.js works with pixel ratio > 1 here. What library basically does is:

canvas.width = viewport.width * window.devicePixelRatio;
canvas.styles.width = viewport.width + 'px'; // Note: The px unit is required here

But you must check how PDF.js works for better perfomance