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

Time:2019-11-2

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 multi column layout: solve the problem of text or picture being cut off mercilessly by paging when generating PDF with jspdf and html2canvas

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

  • 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

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

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

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

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

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

programmeInstead, 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:

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

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

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

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

Recommended Today

Tool usage: 1 . Configuration of SSH client and server in Windows system

SSH principle Refer to SSH principle Windows official configuration link Windows official configuration link Configuration process 1. Start SSH service according to the official configuration link on the server Note that there are two errors in the official configuration link Opensshutils download, according to the official way can’t download Since the tool in 1 cannot […]