Fix ios pdf page limit

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/ios-pdf-fix.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;

src/plugin/ios-pdf-fix.js

@@ -0,0 +1,58 @@
+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;
+
+    opt.html2canvas.windowWidth = pxPageWidth;
+    opt.html2canvas.windowHeight = pxPageHeight;
+
+    // Initialize the PDF.
+    this.prop.pdf = this.prop.pdf || new jsPDF(opt.jsPDF);
+
+    for (var page=0; page<nPages; page++) {
+      var options = Object.assign({}, opt.html2canvas);
+      delete options.onrendered;
+
+      options.x = 0;
+      // 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);
+
+      // Add the page to the PDF.
+      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],
+                        this.prop.pageSize.inner.width, this.prop.pageSize.inner.height);
+    }
+
+    document.body.removeChild(this.prop.overlay);
+  });
+}