Lodop关联内容分页打印

---

前言

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使用》

---

总结

本文记录在使用Lodop需要关联打印项，来达到不定高度的table能相对布局。接着讨论table内嵌条形码的实现方式。