Column multi column layout: solve the problem of text or picture being cut off mercilessly by paging when generating PDF with jspdf and html2canvas

Preface

There are many ways to generate PDF. Now we only discuss how to use jspdf plus html2canvas to generate multi page PDF. I believe that people who have used it will also encounter the problem that if the text or picture card is mercilessly cut at the paging position. Again, let’s briefly introduce the properties we use to solve the problem.

Introduction to columns property

• columns:100px 3;//What is the width of each column

  That is:
  column-count:3//How many columns
  column-width: 100px//How wide is each column

---

• column-fill: auto;//Column sorting and filling
  //By default, balance represents the content that is as average as possible; auto will be set to fill backward

• column-gap:40px;//Set spacing between columns

• column-rule:4px outset #ff6430;//Column to column separator width line type color

  That is:
  column-rule-width//Width of separator between columns
  column-rule-style//Type of separator between columns
  column-rule-color//Color of separator between columns

Column count: 3; // how many columns are divided
Column fill: Auto; // column sorting and filling by default, balance means the content that is as average as possible; auto will be set to fill and lay back 
Column gap: 40px; // distance between columns
Column rule: 4PX set ᦇ ff6430; // the separation line between columns

Try to write HTML online: https://www.runoob.com/try/tr

---

Browser compatibility

Compatibility as of September 7, 2019

practical application

OK, now back to our question.
This problem is very normal. It concerns that we use the screenshot of canvas and put it into PDF, and the canvas will only cut one according to the height. It will not monitor whether the problem is stuck in the middle of the font or picture

I met the same problem a few days ago. My solution is to discard the screenshot from top to bottom:

programme： Instead, the layout should be done in pages. In addition to the front cover, the floating of page header and footer is at the top of the page, and the screenshot is a page by page section. This is good for the front end to clearly grasp the whole process, layout and even pagination calculation.[adoption]

So what if we can solve the problem of arranging by page???

1. Conditional emission solution:Loop the page element to calculate whether the element is just stuck at the height of a page. If so, we will not display the element after it, or insert a page ending character, etc;

   Obviously this is not going to work.
   On the one hand, it is very unscientific to monitor all elements in a large number of cycles under the whole document;
   On the other hand: now that the DOM based rendering is finished, a tag terminator is generated. For example, it’s not clear how many different kinds of terminators there are, so it’s obviously a mistake to stop thinking about this.

2. Inspiration for newspaper Typography:At present, there is no style from top to bottom to support automatic implementation. However, there is a property like newspaper typesetting, column display, left to right, when the first column is full, it will automatically row to the second column.

   For example, effect:

We just use such a property to start the calculation after the first DOM structure is loaded:
totalPage = Math.ceil(thisHeight / maxheight);
How many pages should be arranged according to the size of the page = the actual height of each page divided by the maximum height of the page and rounded up;

Next, set the page width and the number of columns according to this value; finally, translate the corresponding column in the viewable area for each section of the figure

Source:
Documentation: https://developer.mozilla.org
Runoob document: https://www.runoob.com/cssref

GitHub demo address:

https://github.com/yujieying/jspdf_html2canvas_demo

Mark is for reference only. Please correct and supplement end