Improving HTML5 printing quality

[Matt Parizeau]

Q:

I've tried using WebViewer's print function and the page it outputs is fairly low-res. Is there a way to improve the printing quality?

A:

If you would like to achieve higher print quality then there is a modification you can make to create the canvases at a larger size. Inside the prepareDocument function in BaseReaderControl.js look for the line window.utils.setCanvasMultiplier(1);. This is drawing the pages at their normal size, but if you change this value to 2 it would draw the page with twice the width and twice the height. This means the prepare pages step will take longer and use up more memory in the browser but the printed page will be higher quality. You could try experimenting with larger values to see what feels like a good tradeoff (in terms of time, browser memory usage and quality) for your documents.

[sbi]

Would it be possible for you to make this API publicly available? I would love to give our users the option of a "high quality print".

I would like to avoid changes to your source files to keep upgradeability high.

Am Dienstag, 12. August 2014 19:50:24 UTC+2 schrieb Matt Parizeau:

Q:

I've tried using WebViewer's print function and the page it outputs is fairly low-res. Is there a way to improve the printing quality?

A:

If you would like to achieve higher print quality then there is a modification you can make to create the canvases at a larger size. Inside the startPrintJob function in ReaderControl.js look for the line window.utils.setCanvasMultiplier(1);. This is drawing the pages at their normal size, but if you change this value to 2 it would draw the page with twice the width and twice the height. This means the prepare pages step will take longer and use up more memory in the browser but the printed page will be higher quality. You could try experimenting with larger values to see what feels like a good tradeoff (in terms of time, browser memory usage and quality) for your documents.

[Justin Jung]

Hello,

Technically, as ReaderControl is an un-minified source (which means it's already publicly available), but we understand that it could be annoying for you to merge changes when future releases come up. This is something we want to address in the future version of the viewer.

For now, the least invasive edit you could do is the following:

1. In BaseReaderControl.js, change setCanvasMultiplier(1) to setCanvasMultiplier(this.printQuality || 1).

2. In your config file, when you want to enable high resolution printing, set readerControl.printQuality dynamically.

Justin Jung

Software Developer

PDFTron Systems Inc.

[sbi]

Thanks for this simple solution. It works really well. Setting it to 2 already seems to improve the print quality a lot.

Would welcome to see this API in the next version of the WebViewer so we can remove the "hacky" way of doing this.