Set page size via @page + size

In Blink-based browsers, there is a mismatch between document size and
paper size. Even if exactly the same values and unit are used, it is
possible that the printed results takes more pages than expected.

To solve the issue, the page size is set via @page size, and the canvas
and ancestor nodes are assigned a width+height of 100% (=relative to the
page). This change resolves bugs such as blank pages and split pages.
This commit is contained in:
Rob Wu 2015-03-18 23:15:43 +01:00
parent 05991e9f4b
commit d34e6ddd60
3 changed files with 59 additions and 3 deletions

View file

@ -493,10 +493,15 @@ var PDFPageView = (function PDFPageViewClosure() {
// better output until bug 811002 is fixed in FF.
var PRINT_OUTPUT_SCALE = 2;
var canvas = document.createElement('canvas');
// The logical size of the canvas.
canvas.width = Math.floor(viewport.width) * PRINT_OUTPUT_SCALE;
canvas.height = Math.floor(viewport.height) * PRINT_OUTPUT_SCALE;
canvas.style.width = (PRINT_OUTPUT_SCALE * viewport.width) + 'pt';
canvas.style.height = (PRINT_OUTPUT_SCALE * viewport.height) + 'pt';
// The rendered size of the canvas, relative to the size of canvasWrapper.
canvas.style.width = (PRINT_OUTPUT_SCALE * 100) + '%';
canvas.style.height = (PRINT_OUTPUT_SCALE * 100) + '%';
var cssScale = 'scale(' + (1 / PRINT_OUTPUT_SCALE) + ', ' +
(1 / PRINT_OUTPUT_SCALE) + ')';
CustomStyle.setProp('transform' , canvas, cssScale);