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

2023-12-23 13:44

本文主要是介绍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. 打印时,出现数据丢失或表格边框丢失等异常问题

    解决:​ <link rel="stylesheet" type="text/css" media="print" href="./print-lock.css">​这里一定要加上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-plugin-hiprint使用教程【3】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/528243

相关文章

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J