在Vue3项目中,使用vue3-print-nb库可以方便地实现打印功能,并且支持自定义页眉。以下是如何在Vue3项目中集成vue3-print-nb库并配置页眉的详细步骤: 安装vue3-print-nb库: 首先,你需要确保已经安装了vue3-print-nb库。如果还没有安装,可以使用npm或yarn进行安装: bash npm install vue3-print-nb # 或者 yar...
自定义指令 import print from 'vue3-print-nb' directives: { print }<template> sssssssss 打印22 </template> const print = ref({ id: 'printArea', popTitle: '配置页眉标题', // 打印配置页上方的标题 extraHead: '打印', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割 pre...
@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;}:在...
点击打印按钮,就会弹出打印预览和设置的弹框,在设置区域可以选择打印机、可以选择打印布局(横向、纵向)、打印纸张尺寸、边距和页眉页脚等 print2.png 4、其他需求 (1)打印隐藏内容 在打印弹框中需求显示查看的内容,但是在打印的时候需要隐藏,不打印显示
popTitle: "标题",//自定义设置标题 }, 四:插件优化 1.去掉页眉页脚 @page { size: auto; margin: 0mm; } 2.打印內容不自动换行问题 只需要给不自动换行的标签加上 word-wrap:break-word 即可。 .procedure{ word-wrap:break-word; } 五、简单例子 <template...
// 打印媒体查询@mediaprint {#printTest{margin:0;height:266.5mm;//采用默认页眉页脚时,单页内容大概长度,多页时倍数乘} } AI代码助手复制代码 上述方法中,如果刚好占一页,(标准盒子)再添加边框就会多一页空白,说明包括边框、内外边距、内容只要超过页面高度,就会再开一页。
页眉 原创 朝阳39 2022-07-12 16:10:06 1216阅读 1 vue-print-nb打印多出空白页问题 在需要打印的vue页面里,写入以下样式: @page { size: auto; margin: 3mm; } html { background-color: #ffffff; height: auto; margin: 0px; } body { bo ... vue html 其他 转载 mob...
原文参考:https://gitcode.net/mirrors/Power-kxLee/vue3-print-nb?utm_source=csdn_github_accelerator vue3-print-nb插件的一些优化 去掉页眉页脚 @page{ size: auto;margin:0mm; } 打印內容不自动换行问题 .procedure{word-wrap:break-word; }
utm_source=csdn_github_accelerator vue3-print-nb插件的一些优化 去掉页眉页脚 @page { size: auto; margin: 0mm; } 1. 2. 3. 4. 5. 6. 打印內容不自动换行问题 .procedure{ word-wrap:break-word; } 1. 2. 3. 4. 5.
补充:vue-print-nb插件的一些优化 1.去掉页眉页脚 @page { size: auto; margin: 0mm; } 2.打印內容不自动换行问题 只需要给不自动换行的标签加上 word-wrap:break-word; 即可。 .procedure{ word-wrap:break-word; } 总结