10

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

tereško
  • 58,060
  • 25
  • 98
  • 150
Arthur
  • 1,740
  • 3
  • 16
  • 36
  • 3
    Yes, report it at the https://github.com/mozilla/pdf.js and provide all information requested at https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#wiki-pdfjs-does-not-render-my-files-correctly-can-i-report-an-issue – async5 Feb 12 '14 at 14:26
  • Looks like the pdf is a low res scanned document at http://library.tuit.uz/Prezident/27.pdf . It looks okay in pdf.js on my computer http://i.imgur.com/a75PAoq.png – async5 Feb 13 '14 at 21:29
  • Can you post the PDF in question? My guess/asumption is that the font in question is a Type 3 bitmap font and that pdf.js isn't able to do a good job of anti-aliasing it. – leonardr Feb 13 '14 at 20:01
  • I believe there is a solution: http://stackoverflow.com/questions/36330102/how-to-improve-the-print-quality-with-pdf-js-to-print-pdf-document/38429115#38429115 – Michael Kang Jul 21 '16 at 03:12

4 Answers4

4

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

Edric
  • 24,639
  • 13
  • 81
  • 91
M. Codina
  • 41
  • 5
3

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.

lytridic
  • 325
  • 4
  • 8
1

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.

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
0

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.

AppleGrew
  • 9,302
  • 24
  • 80
  • 124