vue-plugin-hiprint使用教程【3】_hiprint 页眉线

5.12、重写原有参数

//格式
export default(function() {
    // code
}()) // 这里要注意，function是自执行函数

// 插件原来的代码查看文章顶部的资源。代码有点多，CSDN不能直接展示

// 上传CSDN默认要积分，不知道怎么弄成免费的。我传了一份到天翼网盘，或者各位自己从Gitee上去下载插件项目
https://cloud.189.cn/t/aYBR7bYVvAR3 （访问码：ncl4）
1
2
3
4
5
6
7
8
9

5.13、自定义参数

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

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
                }
            ]
            }
    ]}
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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的原理是模拟回车功能，原始的表格标题名，手动输入后，回车后插件会对其做处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

*、特别注意点

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

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

2. 表格的每一列如何关联字段名

   解决：在属性面板列面板中，添加标题内容是按照下面的格式填入，如姓名：姓名#name，这样的形式。

3. 注意拖拽的时候不要相互重合，例如先拖了表格，然后托文字到表格上方，然后再把文字拖出表格，这样会导致最终渲染的时候文字无法根据表格高度自动变换

4. 直接触发浏览器打印功能

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

5. 表格在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;
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

6. 表格的一些特殊用法

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

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

   
   // 修改 页眉/页脚线 样式
   .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;
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31

‍

‍