Lodop关联内容分页打印

文章目录

前言
一、打印项关联
二、table内嵌条形码
总结

前言

Lodop打印插件使用系列，本文交流下比较常用的需求。在打印的页面里面有2个或多个table，它们的高度不固定。这种情况也要实现分页。大概2个方向的思路，思路1自行计算高度，在需要换页的时候，调用Lodop的api。自己处理页码。
思路2:2个table自动分页。这里研究下思路2的大概实现。

一、打印项关联

2个table不固定高度的情况下。我们调用如下Api他们会重叠在一起。

  LODOP.ADD_PRINT_TABLE('5mm','0mm','98mm','151mm',document.getElementById(`summaryPickingSlipTemplateId2`)?.innerHTML)

那要怎么办呢，lodop文档有提到。案例14关联打印内容

利用SET_PRINT_STYLEA的类型“LinkedItem”可以把多个独立的内容关联起来，让它们顺序打印,

一个内容关联别人后，其Top值不再是上边距，而是与被关联者的间隙距离,Left值也变为左边距相对偏离量。

多个对象顺序关联后形成“关联串”，这个“串”分页时在每页高度以第一个对象为准，整个过程可有多个串。

  LODOP.ADD_PRINT_TABLE('32mm','0mm','198mm','275mm',document.getElementById(`TemplateId}`)?.innerHTML)
LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1)LODOP.ADD_PRINT_TABLE('5mm','0mm','98mm','151mm',document.getElementById(`TemplateId2`)?.innerHTML)

这样table2就会挨着table1.而且table超高也可以自行分页。

二、table内嵌条形码

要是实现table内嵌条形码，如果用的是官方案例41的方式，是需要提示用户安装插件的。这里的指的是Lodop浏览器插件不是C-lodop。如下图所示。这样的话我原本设计单独使用C-Lodop 有冲突。因为简单打印c-lodop 就完全足够。所以采用第三方的jsbarcode插件处理好了内嵌条形码。再打印出来。其中清晰度的话要特别注意是否符合需求。具体可以参考《Vue3集成条形码插件-jsbarcode配合Lodop使用》
在这里插入图片描述