VUE利用vue

2023-03-16 10:36| 来源: 网络整理| 查看: 265

一、安装vue-print-nb

没有什么前提要求，直接安装即可，但因为Vue2.0和Vue3.0有着不同的用法，因此需要安装的版本也不同，各位看官自行取舍。

Vue2.0版本安装方法：npm install vue-print-nb --save yarn add vue-print-nbVue3.0版本安装方法：npm install vue3-print-nb --save yarn add vue3-print-nb二、引入Vue项目Vue2.0引入方式：

1. 全局挂载,在main.js中引入并注册

import Print from 'vue-print-nb' Vue.use(Print)

2. 自定义指令

import print from 'vue-print-nb' directives: { print }Vue3.0引入方式：

1. 全局挂载

import { createApp } from 'vue' import App from './App.vue' import print from 'vue3-print-nb' const app = createApp(App) app.use(print) app.mount('#app')

2. 自定义指令

import print from 'vue3-print-nb' directives: { print }三、在组件中使用注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id 黄山市机动车排放维修治理（M）站竣工出厂合格证

该车经我站治理维护，准予出厂。

打印

data：

printObj: { id: 'printMe',//id popTitle: "标题",//自定义设置标题 },四：插件优化1.去掉页眉页脚 @page { size: auto; margin: 0mm; } 2.打印內容不自动换行问题

只需要给不自动换行的标签加上 word-wrap:break-word 即可。

.procedure{ word-wrap:break-word; } 五、简单例子 Essential Links // 局部打印文本以及按钮 Print Area Print!

script示例：

export default { name: 'HelloWorld', data () { let that = this return { msg: 'Welcome to Your Vue.js App', print: { id: 'printArea', popTitle: '配置页眉标题', // 打印配置页上方的标题 extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割 preview: true, // 是否启动预览模式，默认是false previewTitle: '预览的标题', // 打印预览的标题 previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印 zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高 previewBeforeOpenCallback () { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback openCallback () { console.log('执行打印了！') }, // 调用打印时的callback closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消) clickMounted () { console.log('点击v-print绑定的按钮了！') }, // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同 // asyncUrl (reslove) { // setTimeout(() => { // reslove('http://localhost:8080/') // }, 2000) // }, standard: '', extarCss: '' } } } }注意点Callback函数中this指向当前print object对象，that返回Vue对象；不需要页眉页脚可以在打印弹窗页面的更多设置里面取消选择；不设置popTitle参数页眉标题为undifined；popTitle参数为空时，页眉标题默认为Document Title。六、参数说明参数作用类型可选项默认值id局部打印有效，标识符string-‘printId’standard局部打印有效，打印的文本类型stringHTML5/loose/stricthtml5extraHead局部打印有效，添加在打印区域的最顶端string--extraCss局部打印有效，为打印区域提供Stylesheet样式表string--popTitle局部打印有效，编辑页眉的标题string-Document TitleclickMounted全局有效，调用v-print绑定的按钮点击事件callbackFunction-this.ObjectopenCallback全局有效，调用打印时的callbackFunction-this.ObjectcloseCallback全局有效，调用关闭打印的callback(无法区分确认or取消)Function-this.ObjectbeforeOpenCallback全局有效，调用开始打印之前的callbackFunction-this.Objectpreview全局有效，控制打印预览Booleantrue/falsefalsepreviewTitle编辑预览页面的预览标题string-'打印预览'previewPrintBtnLabel编辑预览页面的打印按钮文本string-'打印'previewBeforeOpenCallback调用打开预览页面之前的callbackFunction-this.ObjectpreviewOpenCallback调用打开预览页面之后的callbackFunction-this.Objecturl非局部打印有效，异步加载打印指定的URL，确保同源策略相同string--asyncUrl非局部打印有效，异步加载打印指定的URL，确保同源策略相同Function--zIndex预览有效，预览窗口的z-index,默认是20002，最好比默认值更高string,Number-20002

【本文地址】

公司简介

联系我们