vue-print-nb库支持自定义页脚功能。你可以通过配置打印选项中的footer属性来设置页脚内容。 2. 查找vue-print-nb官方文档中关于设置页脚的部分 虽然未直接提供官方文档的链接,但根据搜索结果,我们可以了解到vue-print-nb允许通过打印选项中的footer属性来设置页脚。这个属性可以是一个字符串或函数,返回字符串作为页脚内...
Callback函数中this指向当前print object对象,that返回Vue对象; 不需要页眉页脚可以在打印弹窗页面的更多设置里面取消选择; 不设置popTitle参数页眉标题为undifined; popTitle参数为空时,页眉标题默认为Document Title。 六、参数说明
printObj:可以设置打印页眉 去掉页面页脚 @page{ margin-top:1mm; //去掉页眉 margin-bottom: 1mm; //去掉页脚 }
更新: 打印标题显示 如果打印时不想要标题,在打印设置中取消勾选页眉和页脚.这个是打印网页自带的,代码中好像不能直接去掉. 结语: 我写的这些处理方法也并不是唯一的,这个组件的原理其实就是将你页面的元素copy过去,重新创建一个打印页面,你完全可以在调用打印方法前对元素进行修改 这两个对应的githup代码都已经更...
点击打印按钮,就会弹出打印预览和设置的弹框,在设置区域可以选择打印机、可以选择打印布局(横向、纵向)、打印纸张尺寸、边距和页眉页脚等 print2.png 4、其他需求 (1)打印隐藏内容 在打印弹框中需求显示查看的内容,但是在打印的时候需要隐藏,不打印显示
@mediaprint{//media标签@page{size:A5 portrait;//设置纸张及其方向 portrait:纵向; landscape: 横向margin-top:0mm;//去掉页眉margin-bottom:0mm;//去掉页脚margin:2mm3mm;:设置左边距和右边距为2毫米,上边距和下边距为3毫米。}h4{color:red;//打印时将标签h4设置为红色}p{page-break-before:always;}:在...
结果如图: 点击更多设置可以设置缩放,页眉页脚等。 最后需求又让分页打印,没办法,又去网上搜了好久,最后看有大神说css的智能推荐vue使用lodop打印插件 首先将lodop安装包放到static下 下载地址:http://www.c-lodop.com/download.html 新建一个vue测试lodop功能 LodopFuncs.js lodopPrint.vue引用 测试结果: 居然要...
Web 实现页面打印 安装 官网地址:https://github.com/Power-kxLee/vue3-print-nb // 安装 打印组件 npm install vue-print-nb --save 引用 vue2引用 import Print from 'vue-print-nb' // 全局引用 Vue.use(Print); // 或者 // 单组件引用 ...
元素被设置了宽高100%,继承后也是100%,找到并取消100%设置,项目结构复杂不好找的话,就给打印节点设置固定高度,打印一般固定尺寸如A4纸(210mm×297mm),所以固定宽高没关系。媒体查询,仅在打印时采用样式: // 打印媒体查询@mediaprint {#printTest{margin:0;height:266.5mm;//采用默认页眉页脚时,单页内容大概长度...
使用vue-print-nb打印,不同分辨率(1366一下或1600以上)时,el-table有些列没有打印出来(页面能够正常展示),查看官方api,通过设置打印样式也无法全部打印: 1printObj:{2id:"printId",3popTitle:"",4extraHead: ', #printId { width: 100%; } '5} 解决方法1:手撸一个el-table样式的表(没有分页): 样...