CODEWITHSUNDEEP
pdf-generationmozillapdf.js
Arthur
Arthur

Reputation: 1760

How to improve display quality in pdf.js

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.

enter image description here

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

enter image description here

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

Upvotes: 11

Views: 18232

Answers (6)

K J
K J

Reputation: 11730

The question was about a much older version of PDF.JS.

Several versions of PDF.JS over the intervening time, have had intermittent problems with "holes" in accelerated text rendering!

So just to put that source into modern perspective, here is a current view where the middle Firefox render is today much sharper. Thus the source question is in effect now already answered!

However in comparison with true PDF viewers (that use anti-alias for images), see upper and lower rendering, it is perhaps now "too sharp" and less easy on the eye.

Click on the image below to see the normal screen scale view.

enter image description here

Upvotes: 0

Johnson Fashanu
Johnson Fashanu

Reputation: 1130

  const viewport = page.getViewport({ scale: 4 });
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d') as CanvasRenderingContext2D;
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  canvas.style.scale = `${width / 4000}`
  canvas.style.position = 'absolute';

  await page.render({
    canvasContext: context,
    annotationMode: 0,
    viewport: viewport,
  }).promise;

Upvotes: 0

AppleGrew
AppleGrew

Reputation: 9570

I ran into the same issue and I used the intent option of renderContent to fix that.

const renderContext = {
    intent: 'print',
    // ....
}
var renderTask = page.render(renderContext);

As per docs renderContext accepts intent which supports three values - display, print or any. The default is display. When I used print instead the render quality was extremely good, at par with any desktop app.

Upvotes: 1

M. Codina
M. Codina

Reputation: 41

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

Upvotes: 4

Gyrocode.com
Gyrocode.com

Reputation: 58880

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.

Upvotes: 3

lytridic
lytridic

Reputation: 343

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.

Upvotes: 3

Related Questions