乐趣区

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

jiezi

前言

生成 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…

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

退出移动版