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

前言

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

Columns 属性介绍

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

  也就是：
  column-count:3 // 分多少列
  column-width: 100px //每列多少宽度

---

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

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

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

  也就是：
  column-rule-width //列与列之间的分隔线 宽度
  column-rule-style //列与列之间的分隔线 类型
  column-rule-color //列与列之间的分隔线 颜色

column-count:3;       //分红多少列
column-fill: auto;    //列排序充列 默认是balance 就是表明尽可能平均的内容； auto会设置成填满 日后铺 
column-gap:40px;      //列与列之间的距离
column-rule:4px outset #ff6430;     // 列与列之间的分隔线

在线写html 能够过去试试：https://www.runoob.com/try/tr...

---

浏览器的兼容

兼容截止我编写时间2019.09.07

实际应用

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

我前阵子也遇到相同的问题，我这边的解决方法是，舍弃截图从上往下截的截图：

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

那么若是能解决按每页的排呢？？？

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

   很明显这个是行不通的。
   一方面是：由于整个document下来 元素不少 大量循环全部的元素来监控也很不科学；
   另外一方面：如今这种基于dom结构渲染完了 ，生插一个标签的结束符。例如</div>这种，也是算不清有多少个种类不一样的结束符； 因此这很明显是个错误示范 咱们中止对于这边的思考。

2. 报纸排版法的灵感： 从上往下排目前没有样式支持自动能实现的。然而：有个属性像报纸排版的那种，分栏显示，左往右，当第一栏满了会自动排到第二栏。

   例如效果：

咱们就是利用这么一个属性，等第一次dom结构加载完，开始算:
totalPage = Math.ceil(thisHeight / maxheight);
该页面按尺寸排改要排多少页= 每页的实际须要的高度除以页的最大高度 往上取整；

接下来就根据这个值 设置页宽度 和栏目个数； 最后每截一张图就平移对应的那一栏再可 视区里面就能够了

资料来源：
文档：https://developer.mozilla.org...
runoob文档：https://www.runoob.com/cssref...

github demo地址:

https://github.com/yujieying/jspdf_html2canvas_demo

mark一下 仅供参考 欢迎更正补充 end