vue-print-nb打印不全,vue实现批量打印print
本文主要介绍了VUE如何使用vue-print-nb实现打印功能的相关信息，同时也介绍了vue-print-nb使用中的常见问题，如空白页等，供大家参考。
目录
一、安装vue-print-nb二。介绍Vue项目三。参数IV的描述。应用五、注释补充：空白页解决方案汇总
一、安装vue-print-nb
没有前提条件，直接安装就行，但是因为Vue2.0和Vue3.0的用法不同，要安装的版本也不一样，可以自己选择。
2.0版安装方法：
npm安装vue-打印-注意-保存
3.0版安装方法：
npm安装vue 3-打印-注意-保存
二、引入Vue项目
Vue2.0的引入方法：
//1.全局装载
从“vue-print-nb”导入打印
Vue.use(打印)
//或者
//2.定制说明
从“vue-print-nb”导入打印
指令：{
打印
}
Vue3.0的引入方法：
//1.全局装载
从“vue”导入{ createApp }
从导入应用程序。/App.vue
从“vue3-print-nb”导入打印
const app=createApp(App)
app.use(打印)
app . mount(# app)
//或者
//2.定制说明
从“vue3-print-nb”导入打印
指令：{
打印
}
三、参数说明
可以选择动作类型，本地打印默认值id，本地打印标识符字符串-print ID standard，本地打印文本类型字符串html 5/loose/strict html 5 extra head，本地打印打印区域顶部添加的String - extraCss。为打印区域提供样式表样式表字符串- popTitle。本地打印有效，编辑表头的标题字符串-文档标题clickmounted全局有效。调用v-print绑定的按钮点击事件回调函数——this。ObjectOpenCallback全局，以及回调函数-this。全局调用print时ObjectCloseCallback是有效的。这个功能。调用关闭打印的ObjectBeforeOpenCallback是全局有效的，函数-this。调用开始打印前的ObjectPreview是全局有效的。控制打印预览boolean true/false false Preview title编辑预览页面字符串的预览标题——打印预览 PreviewPrintbLabel编辑预览页面字符串的打印按钮文本——打印 previewBeforeOpenCallback调用回调函数——this。在打开预览页面之前。EctpreviewOpenCallback在打开预览页面后调用回调函数-this.object URL，在非本地打印时有效。打印指定的URL以确保相同的同源策略。String - asyncUrl在非本地打印中有效，异步加载并打印指定的Url。确保同源策略是同一个函数——zIndex预览有效，预览窗口的z-index默认为20002，最好高于默认值字符串，Number-20002。
四、应用
模板示例：
模板
你好
h1{{ msg }}/h1
h2基本链接/h2
//部分打印文本和按钮。
div id=printArea 打印区域/div
按钮v-print=printPrint！/按钮
保险商实验所
里
a
href=https://vuejs.org
target=_blank
核心文档
/a
/李
里
a
href=https://forum.vuejs.org
target=_blank
论坛
/a
/李
里
a
href=https://chat.vuejs.org
target=_blank
社区聊天
/a
/李
里
a
href=https://twitter.com/vuejs
target=_blank
推特
/a
/李
英国铁路公司
里
a
href= http://vuejs-templates . github . io/web pack/
target=_blank
此模板的文档
/a
/李
/ul
h2生态系统/h2
保险商实验所
里
a
href=http://router.vuejs.org/
target=_blank
vue路由器
/a
/李
里
a
href=http://vuex.vuejs.org/
target=_blank
状态管理
/a
/李
里
a
href= http://vue-loader . vue js . org/
target=_blank
真空装载机
/a
/李
里
a
href= https://github . com/vue js/awesome-vue
target=_blank
太棒了
/a
/李
/ul
/div
/模板
脚本示例：
导出默认值{
名称：“HelloWorld”，
data () {
让那个=这个
返回{
msg:“欢迎使用您的Vue.js应用”，
打印：{
id:“打印区域”，
PopTitle:配置标题，//在配置页面的顶部打印标题
ExtraHead: print ，//顶部标题文本，附加到Head标记的额外标记，用逗号分隔。
Preview: true，//是否启动预览模式，默认为false。
PreviewTitle:预览标题，//打印预览标题
PreviewPrintBtnLabel:预览结束，开始打印，//打印预览标题下方的按钮文本，点击进入打印。
ZIndex: 20002，//预览窗口的z-index，默认值为20002，最好高于默认值。
PreviewForeopenCallback(){ console . log(正在加载预览窗口！);Console.log(that.msg，this) }，//在窗口打开前预览回调
PreviewPenCallback(){ console . log(预览窗口已加载，预览已打开！)}，//窗口打开时预览回调
ForeOpenCallback () {console.log(开始打印之前！}}，//开始打印前回调
open callback(){ console . log( print executed！)}，//打印时调用回调
CloseCallback () {console.log(打印工具已关闭！)}，//关闭打印回拨(无法区分确认或取消)
ClickMounted () {console.log(我点击了v-print绑定的按钮！) },
//URL: 3358localhost: 8080/，//打印指定的URL以确保相同的起源策略。
//asyncUrl (reslove) {
//setTimeout(()={
//reslove( http://localhost:8080/)
//}, 2000)
//},
标准： ，
扩展：“”
}
}
}
}
五、注意点
在回调函数中，它指向当前的打印对象object，并返回Vue对象；如果不需要页眉页脚，可以在打印弹出页面的更多设置中取消选择；不要将popTitle参数的头标题设置为未定义；当popTitle参数为空时，页眉标题默认为文档标题。
补充：空白页的解决方法
有时页面看起来很正常，打印预览中有多余的空白页。原因是边距问题，也就是说肉眼看不到内容，但实际上有空白。
例如，代码是这样的：
div id= print test style= border:1px纯黑
特性
brbr brbr brbr brbr brbr brbr brbr brbr brbr brbr brbr brbr brbr brbr brbr brbr
文本123
/div
后面没有内容，但还是多了一张空白页：
找到最可靠的方法
风格
@媒体印刷{
/*最外层打印节点*/
#打印测试{
显示：块；
高度：自动；
溢出：隐藏；
}
}
/风格
打印节点的外部边缘设置为0。
元素的宽度和高度设置为100%，继承后也是100%。如果发现并取消100%设置，如果项目结构复杂，难以发现，将为打印节点设置固定高度。一般打印尺寸是固定的比如A4纸(210mm297mm)，所以固定宽度和高度没关系。媒体查询，仅在打印时使用样式：
//打印媒体查询
@媒体印刷{
#打印测试{
边距：0；
高度：266.5mm//使用默认页眉页脚时，使用多页时，单页的大概长度乘以倍数。
}
}
在上面的方法中，如果只是占据一页，给(标准框)加上边框就会多一个空白页，也就是说包括边框、内外边距，如果内容超过页面高度，就会打开另一页。
如果溢出部分(如1px边框和文字)不足以显示在下一页但仍显示在上一页；或者溢出部分(如外边距)不显示，则显示空白页。
总结
关于VUE如何使用vue-print-nb实现打印功能的文章到此结束。更多关于VUEvue-print-nb打印功能的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。