From 80f13dd5a5ffd955f0df8828dd4d032356adf544 Mon Sep 17 00:00:00 2001 From: Scot Murphy Date: Tue, 25 Jan 2022 16:55:50 +0000 Subject: [PATCH 1/4] Add pdf page limit workaround --- src/index.js | 59 ++++++++++++++++++++------------------- src/plugin/ios-pdf-fix.js | 53 +++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 29 deletions(-) create mode 100644 src/plugin/ios-pdf-fix.js diff --git a/src/index.js b/src/index.js index 1b82157..88a572f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,29 +1,30 @@ -import Worker from './worker.js'; -import './plugin/jspdf-plugin.js'; -import './plugin/pagebreaks.js'; -import './plugin/hyperlinks.js'; - -/** - * Generate a PDF from an HTML element or string using html2canvas and jsPDF. - * - * @param {Element|string} source The source element or HTML string. - * @param {Object=} opt An object of optional settings: 'margin', 'filename', - * 'image' ('type' and 'quality'), and 'html2canvas' / 'jspdf', which are - * sent as settings to their corresponding functions. - */ -var html2pdf = function html2pdf(src, opt) { - // Create a new worker with the given options. - var worker = new html2pdf.Worker(opt); - - if (src) { - // If src is specified, perform the traditional 'simple' operation. - return worker.from(src).save(); - } else { - // Otherwise, return the worker for new Promise-based operation. - return worker; - } -} -html2pdf.Worker = Worker; - -// Expose the html2pdf function. -export default html2pdf; +import Worker from './worker.js'; +import './plugin/jspdf-plugin.js'; +import './plugin/pagebreaks.js'; +import './plugin/hyperlinks.js'; +import './plugin/ios-pdf-fix.js'; + +/** + * Generate a PDF from an HTML element or string using html2canvas and jsPDF. + * + * @param {Element|string} source The source element or HTML string. + * @param {Object=} opt An object of optional settings: 'margin', 'filename', + * 'image' ('type' and 'quality'), and 'html2canvas' / 'jspdf', which are + * sent as settings to their corresponding functions. + */ +var html2pdf = function html2pdf(src, opt) { + // Create a new worker with the given options. + var worker = new html2pdf.Worker(opt); + + if (src) { + // If src is specified, perform the traditional 'simple' operation. + return worker.from(src).save(); + } else { + // Otherwise, return the worker for new Promise-based operation. + return worker; + } +} +html2pdf.Worker = Worker; + +// Expose the html2pdf function. +export default html2pdf; diff --git a/src/plugin/ios-pdf-fix.js b/src/plugin/ios-pdf-fix.js new file mode 100644 index 0000000..38f02d6 --- /dev/null +++ b/src/plugin/ios-pdf-fix.js @@ -0,0 +1,53 @@ +import Worker from '../worker.js'; +import { jsPDF } from 'jspdf'; +import * as html2canvas from 'html2canvas'; + +/* iOS PDF Canvas Size limitation Workaround plugin: + + Creates a canvas per page instead of attempting to render the entire document as one canvas. + + This is not optimal but produces the desired result. +*/ + +Worker.prototype.toPdf = function toPdf() { + var prereqs = [ + function checkContainer() { return document.body.contains(this.prop.container) + || this.toContainer(); } + ]; + + return this.thenList(prereqs).then(async function toPdf_pagebreak_internal() { + var opt = this.opt; + var root = this.prop.container; + var pxPageWidth = this.prop.pageSize.inner.px.width; + var pxPageHeight = this.prop.pageSize.inner.px.height; + + var clientBoundingRect = root.getBoundingClientRect(); + + var pxFullHeight = clientBoundingRect.height; + var nPages = Math.ceil(pxFullHeight / pxPageHeight); + + opt.html2canvas.width = pxPageWidth; + opt.html2canvas.height = pxPageHeight; + + // Initialize the PDF. + this.prop.pdf = this.prop.pdf || new jsPDF(opt.jsPDF); + + for (var page=0; page Date: Tue, 25 Jan 2022 22:52:05 +0000 Subject: [PATCH 2/4] Set the canvas dementions to match the page demensions to align the rendering on the pdf page correctly. --- src/plugin/ios-pdf-fix.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/plugin/ios-pdf-fix.js b/src/plugin/ios-pdf-fix.js index 38f02d6..2c90285 100644 --- a/src/plugin/ios-pdf-fix.js +++ b/src/plugin/ios-pdf-fix.js @@ -29,6 +29,9 @@ Worker.prototype.toPdf = function toPdf() { opt.html2canvas.width = pxPageWidth; opt.html2canvas.height = pxPageHeight; + opt.html2canvas.windowWidth = pxPageWidth; + opt.html2canvas.windowHeight = pxPageHeight; + // Initialize the PDF. this.prop.pdf = this.prop.pdf || new jsPDF(opt.jsPDF); @@ -37,7 +40,8 @@ Worker.prototype.toPdf = function toPdf() { delete options.onrendered; // Increase the y value to capture only the 'current' page - opt.html2canvas.y = (page + 1) * pxPageHeight; + options.x = 0; + options.y = page * pxPageHeight; var canvas = await html2canvas(this.prop.container, options); @@ -45,9 +49,9 @@ Worker.prototype.toPdf = function toPdf() { if (page) this.prop.pdf.addPage(); var imgData = canvas.toDataURL('image/' + opt.image.type, opt.image.quality); this.prop.pdf.addImage(imgData, opt.image.type, opt.margin[1], opt.margin[0], - pxPageWidth, pxPageHeight); + this.prop.pageSize.inner.width, this.prop.pageSize.inner.height); } document.body.removeChild(this.prop.overlay); }); -} +} \ No newline at end of file From 8f9d894d297ec1d65022321dae2cc7b760e5909d Mon Sep 17 00:00:00 2001 From: Scot Murphy Date: Tue, 25 Jan 2022 22:52:34 +0000 Subject: [PATCH 3/4] Re-order the plugins to operate correctly --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 88a572f..2f5b1bf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,8 @@ import Worker from './worker.js'; import './plugin/jspdf-plugin.js'; import './plugin/pagebreaks.js'; -import './plugin/hyperlinks.js'; import './plugin/ios-pdf-fix.js'; +import './plugin/hyperlinks.js'; /** * Generate a PDF from an HTML element or string using html2canvas and jsPDF. From 003f24ddbced893eaa276dc962358f1a1b776196 Mon Sep 17 00:00:00 2001 From: Scot Murphy Date: Wed, 26 Jan 2022 21:05:25 +0000 Subject: [PATCH 4/4] Minor tweak to how the y offset is calculated --- src/plugin/ios-pdf-fix.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plugin/ios-pdf-fix.js b/src/plugin/ios-pdf-fix.js index 2c90285..4886db4 100644 --- a/src/plugin/ios-pdf-fix.js +++ b/src/plugin/ios-pdf-fix.js @@ -39,9 +39,10 @@ Worker.prototype.toPdf = function toPdf() { var options = Object.assign({}, opt.html2canvas); delete options.onrendered; - // Increase the y value to capture only the 'current' page options.x = 0; - options.y = page * pxPageHeight; + // Increase the y value to capture only the 'current' page + // -1 to be exclusive to the current page's content + options.y = page * (pxPageHeight - 1); var canvas = await html2canvas(this.prop.container, options);