vue-plugin-hiprint使用教程【3】

本文主要是介绍vue-plugin-hiprint使用教程【3】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

5.12、重写原有参数

//格式
export default(function() {// code
}()) // 这里要注意，function是自执行函数// 插件原来的代码查看文章顶部的资源。代码有点多，CSDN不能直接展示// 上传CSDN默认要积分，不知道怎么弄成免费的。我传了一份到天翼网盘，或者各位自己从Gitee上去下载插件项目
https://cloud.189.cn/t/aYBR7bYVvAR3 （访问码：ncl4）

5.13、自定义参数

// 写法和5.12一致
// 具体参考上面

5.14、将重写参数和自定义参数生效

// 5.12 5.13 5.14具体参考：https://mp.weixin.qq.com/s?__biz=MzUyMzg5NDU0Mg==&mid=2247484716&idx=1&sn=150f9646b3cb9483b0202a310860e155&chksm=fa34ef4dcd43665b47c09dcf72c8381b0895ecf4176d4677c931c2ff25066c13623d39525ea4&scene=178&cur_album_id=2779135389855956995#rd
hiprint.setConfig();
hiprint.setConfig({optionItems: [ // 这里放重写参数，作用全部tab，如果想要具体某个元素生效，需要写到对应的tab中fontSize,custom],text: {tabs: [{options: []},{name: '样式',options: [{name:'customKey',after: '',hidden: false}]}]}})

5.15、字段名和表格标题从自定义弹窗选择回填

// 虽然插件自身提供select功能，但是不满足我的需求
// 需求：字段名和表格标题根据特定的场合具有不同信息，需要再弹窗中选择后回填到属性面板// 方法1调用updateOption，不是很好用
_designObj.updateOption(key, value);// 方法2：
// 步骤1：重写title和field参数，在input后面跟上自定义button
// 步骤2：数据回填方法
let e = jQuery.Event("keydown");//模拟一个键盘事件e.keyCode = 13; // 模拟回车
// 字段名回填
$('.hiprint-option-item-field textarea[placeholder="请输入标题"]').val('name' + new Date().getTime() + '#id')
$('.hiprint-option-item-field textarea[placeholder="请输入标题"]').trigger(e)
// 表格标题回填
$('.hiprint-option-item-field input[placeholder="请输入字段名"]').val('name' + new Date().getTime())
$('.hiprint-option-item-field input[placeholder="请输入字段名"]').trigger(e)// 方法2的原理是模拟回车功能，原始的表格标题名，手动输入后，回车后插件会对其做处理

*、特别注意点

打印时，出现数据丢失或表格边框丢失等异常问题

解决： <link rel="stylesheet" type="text/css" media="print" href="./print-lock.css">这里一定要加上media="print"，否则表格边框无效且会出现其他问题
表格的每一列如何关联字段名

解决：在属性面板列面板中，添加标题内容是按照下面的格式填入，如姓名：姓名#name，这样的形式。
注意拖拽的时候不要相互重合，例如先拖了表格，然后托文字到表格上方，然后再把文字拖出表格，这样会导致最终渲染的时候文字无法根据表格高度自动变换

直接触发浏览器打印功能

1、表格分组头和分组脚功能建议不要使用，因为在打印的时候这个功能会出现异常问题，在PDF上没问题
2、对于脚功能，可以自己通过将矩形放置在最后面，然后嵌套自定义文本来实现

表格在PDF中rowspan无效问题

问题有两个
1、html2Canvas无法正常识别rowspan
2、根本原因在于tr的border在rowspan中隐藏的情况无法被html2Canvas正常解析，所以需要去掉tr的border，用td来实现
// 放在全局。解决办法虽然有用但是会导致属性面板无法控制边框
.hiprint-printElement-tableTarget-border-all {border: 0px solid !important;
}
td{border: 1px solid;
}
tbody .hiprint-printElement-tableTarget-border-all{border-top: 1px solid !important;border-bottom: 1px solid !important;
}

表格的一些特殊用法

在表格属性设置-列选项中：底部聚合类型。这个功能能提供简单的列合并运算。请善用

设计图上下各有一条虚线。那个是页眉页脚线。在页眉上面页脚下面的，会在每一页重复出现，请善用


// 修改 页眉/页脚线 样式
.hiprint-headerLine,
.hiprint-footerLine {border-color: red !important;
}.hiprint-headerLine:hover,
.hiprint-footerLine:hover {border-top: 3px dashed red !important;
}.hiprint-headerLine:hover:before {content: "页眉线";left: calc(50% - 18px);position: relative;background: #ffff;top: -12px;color: red;font-size: 12px;
}.hiprint-footerLine:hover:before {content: "页脚线";left: calc(50% - 18px);position: relative;color: red;background: #ffff;top: -12px;font-size: 12px;
}