vue-plugin-hiprint使用教程【3】
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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; }
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)