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的原理是模拟回车功能,原始的表格标题名,手动输入后,回车后插件会对其做处理

*、特别注意点

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

    解决:​这里一定要加上media="print"​,否则表格边框无效且会出现其他问题

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

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

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

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

    1、表格分组头和分组脚功能建议不要使用,因为在打印的时候这个功能会出现异常问题,在PDF上没问题
    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;
    }
    
  6. 表格的一些特殊用法

    在表格属性设置-列选项中:底部聚合类型。这个功能能提供简单的列合并运算。请善用
    
  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;
    }
    

你可能感兴趣的:(vue.js,javascript,前端)