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
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
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
Compatibility as of September 7, 2019
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???
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.
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
Runoob document: https://www.runoob.com/cssref
GitHub demo address:
Mark is for reference only. Please correct and supplement end