diff --git a/README.md b/README.md index add2fb2..0bf4828 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,18 @@ You may add `html2pdf`-specific page-breaks to your document by adding the CSS c ``` +In converse you can add the CSS class `html2pdf__page-break-avoid` to any element. During PDF creation if it is detected that the start of an element with this class will be on a different page than the end, then a page break element will be inserted before it so it starts on a new page. + +```html +
+ I'm on page 1! +
+ +
Don't page break in this image.
+
+
+``` + ### Image type and quality You may customize the image type and quality exported from the canvas by setting the `image` option. This must be an object with the following fields: diff --git a/src/index.js b/src/index.js index 6c8700f..2c746cf 100644 --- a/src/index.js +++ b/src/index.js @@ -134,6 +134,28 @@ html2pdf.makeContainer = function(source, pageSize) { el.style.height = pxPageHeight - (clientRect.top % pxPageHeight) + 'px'; }, this); + // Enable avoiding page-breaks in the middle of elements. + var pageBreakAvoids = source.querySelectorAll('.html2pdf__page-break-avoid'); + Array.prototype.forEach.call(pageBreakAvoids, function (el) { + var clientRect = el.getBoundingClientRect(); + var startPageNum = Math.floor(clientRect.top / pxPageHeight); + var endPageNum = Math.floor(clientRect.bottom / pxPageHeight); + if(endPageNum > startPageNum){ + /* + * Add a page-break element before the current element with + * the height computed so elements further down can properly + * avoid page-breaks if possible. + */ + var pageBreak = createElement("div", { + style: { + height: (pxPageHeight - (clientRect.top % pxPageHeight) + 'px'), + display: "block" + } + }); + el.parentElement.insertBefore(pageBreak, el); + } + }, this); + // Return the container. return container; };