vue-plugin-hiprint打印高度不够，提示：没有足够空间,显示下方内容，问题处理方案及实操

前言

最近在使用vue-plugin-hiprint的时候出现了打印高度不够的情况，同时发现作者已经停止了免费版的维护，但是在收费版svprint上已经解决了该问题,公司更希望使用免费的，所以我们就来看看怎么处理这个问题。

bug的现象

ps:问题链接gitee.com/CcSimple/vu...

解决方案

一般出现这种插件的bug，处理方案无非就是如下几种

问题转移：即使用其它第三方插件或者自己编写一个插件解决bug
问题接受：认可这个问题的结果，无需理会
问题规避：更换项目设计之类的
问题上报：提交issues等待第三方的插件开发者修复，然后更新插件到修复版

ps: 遗憾的是通过查阅开源项目的说明，发现这个已经停止维护了，但是领导又不想使用收费的，切换一个新的插件，负担也比较重，于是只能去查阅它的源码了

代码分析

通过查阅源码发现问题出在下面这个代码块他的逻辑是读取模板的每一个元素块，渲染成dom，计算高度，当当前页面的高度不够展示一个元素的时候，就会在这个空隙中返回：没有足够空间,显示下方内容, 可分页高度

优化思路通过这个，就在想如果当前页不够，那么元素渲染到下一页怎样？于是开始动手

js 复制代码

//思路 当m(分页html没有获取到tr) 且 curRow有数据（总的dom上是有数据的） 那么就说明高度不够了,理应填充表头
        if (m == 0 && curRow.length && g == curRow.data("rowData")) {
          return {
            target: $('<div></div>'),//元素为div空元素
            length: 0,//这里填0实际没有渲染数量
            height: _assets_plugins_hinnn__WEBPACK_IMPORTED_MODULE_3__.a.px.toPt(s),//高度为剩余高度
            isEnd: !1 //表示有下一页
          }
        }

修复后的效果如下

红色区域的被div占据，后面的数据渲染到下一页了，能正常使用了。

如何应用修复的插件代码

要知道我们的插件都是由第三方的作者开源到npm上的，那么我们采取的第一个方案就是把这个东西放到npm上，这个过程就不再赘述了
也可以托管到git私仓上，这里我建了一个仓库存放，源码打包后的内容。

3记得对提交的打包产物打上标签用来做版本号

4最后在package的配置中指向你的源码库

js 复制代码

//配置git的地址加#版本号
"vue-plugin-hiprint": "git+http://xxxxx:9080/xxxx/hiprint-lib.git#v0.0.71",

总结

主要有3个收获

对vue-plugin-hiprint的内部逻辑的实现进行了研究，积累了这方面的经验。
个人也实现了一个包管理的流程，虽然npm的更规范，但是我们这是小公司，他们更希望能自己管理自己的代码，所以是发布到npm还是使用git都行，最终目的达到就行了。
发现了vue-plugin-hiprint内部混淆代码后的for循环的另一种写法,以后想装一下就有思路了，哈哈

ini 复制代码

//这个这个for循环的初始化部分有三个表达式：
//1.  `var d = n.find(".hiprint-printElement-tableTarget:eq(" + u + ")")`
//2.  `c = void 0`
//3.  `h = []`
//这个循环没有条件判断，也没有递增步骤，所以它将是一个无限循环，除非在循环体内有`break`语句来跳出循环
for (var d = n.find(".hiprint-printElement-tableTarget:eq(" + u + ")"), c = void 0, h = []; ;) 

//这个和上一个类似，当 `l` 为 `false` 时，`!l` 为 `true`，循环继续，当 `l` 变为 `true` 时，`!l` 为 `false`，循环结束。
for (var a, p = this.getBeginPrintTopInPaperByReferenceElement(t), s = 0, l = !1; !l;)