jshtml生成图片自动分页,Columns多栏布局妙用:解决用jspdf加html2canvas生成PDF时文字或图片被分页无情截断问题...

前言

生成PDF有不少种方案&＃xff0c;如今只讨论用jspdf加html2canvas生成多页PDF时&＃xff0c;相信用过的人也遇到若是文字或图片卡在分页位置处被无情裁断的问题。再次以前先简单介绍下咱们用于解决问题的属性。php

Columns 属性介绍

columns:100px 3; //每列多少宽度 分多少列

也就是&＃xff1a;

column-count:3 // 分多少列

column-width: 100px //每列多少宽度css

column-fill: auto; //列排序充列

//默认是balance 就是表明尽可能平均的内容&＃xff1b; auto会设置成填满 日后铺

column-gap:40px; //设置列之间的间隔

column-rule:4px outset #ff6430; //列与列之间的分隔线 宽度 线类型 颜色 html

也就是&＃xff1a;

column-rule-width //列与列之间的分隔线 宽度

column-rule-style //列与列之间的分隔线 类型

column-rule-color //列与列之间的分隔线 颜色前端

column-count:3; //分红多少列

column-fill: auto; //列排序充列 默认是balance 就是表明尽可能平均的内容&＃xff1b; auto会设置成填满 日后铺

column-gap:40px; //列与列之间的距离

column-rule:4px outset #ff6430; // 列与列之间的分隔线

浏览器的兼容

兼容截止我编写时间2019.09.07git

实际应用

好&＃xff0c;如今从新回到咱们的问题。

这个问题是很正常的&＃xff0c;事关咱们是用画布截图而后放进去PDF里面&＃xff0c;而画布只会根据高度够了就截一张&＃xff0c;它是不会去监控那个问题是否是恰好卡在字体或图片的中间呢~ 例如&＃xff1a;github

我前阵子也遇到相同的问题&＃xff0c;我这边的解决方法是&＃xff0c;舍弃截图从上往下截的截图&＃xff1a;canvas

方案&＃xff1a; 改用在排版时就已经分页排版好&＃xff0c;除了封面外&＃xff0c;其它时间页头页脚浮动是页面上方&＃xff0c;截图是一页一页的截&＃xff0c;这样好处是前端能清晰掌握整个过程和排版甚至是分页的计算。【采用】浏览器

那么若是能解决按每页的排呢&＃xff1f;&＃xff1f;&＃xff1f;dom

条件发射解决方法&＃xff1a;循环页面元素&＃xff0c;计算该元素是否恰好卡在一页的高度位置&＃xff0c;若是是&＃xff0c; 那么咱们把它后面的就不显示了&＃xff0c;或者插入个分页结束符等&＃xff1b;

很明显这个是行不通的。

一方面是&＃xff1a;由于整个document下来 元素不少 大量循环全部的元素来监控也很不科学&＃xff1b;

另外一方面&＃xff1a;如今这种基于dom结构渲染完了 &＃xff0c;生插一个标签的结束符。例如