vue项目打印网页功能-vue-print-nb

描述:

支持两种打印方式,直接打印页面 HTML、打印 URL

简单易用,支持兼容 Vue 的浏览器版本

在线Demo:

 测试DEMO地址

安装:

Vue2 版本

npm install vue-print-nb --save

Vue3 版本

npm install vue3-print-nb --save

 v-print API

使用方法

打印整个页面:

打印指定范围:

export default {
    data() {
        return {
            printObj: {
              url: 'http://localhost:8080/'
              beforeOpenCallback (vue) {
                console.log('打开之前')
              },
              openCallback (vue) {
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

打印网址:

export default {
    data() {
        return {
            printObj: {
              url: 'http://localhost:8080/'
              beforeOpenCallback (vue) {
                console.log('打开之前')
              },
              openCallback (vue) {
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

打印预览

支持打印预览、传入、支持所有打印方式preview:true

打印网址预览:

export default {
    data() {
        return {
            
            printObj: {
              url: 'http://localhost:8080/'
              preview: true,
              previewTitle: 'Test Title', // The title of the preview window. The default is 打印预览
              previewBeforeOpenCallback (vue) {
                console.log('正在加载预览窗口')
              },
              previewOpenCallback (vue) {
                console.log('已经加载完预览窗口')
              },
              beforeOpenCallback (vue) {
                console.log('打开之前')
              },
              openCallback (vue) {
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

v-print API

Parame Explain Type OptionalValue DefaultValue
id 范围打印 ID,所需值 String
standard 文档类型(仅限打印本地范围) String html5/loose/strict html5
extraHead 在节点中添加 DOM 节点,并用(仅打印本地范围)分隔多个节点, String
extraCss 新的CSS样式表,并用(仅打印本地范围)分隔多个节点, String -
popTitle 标签内容(仅打印本地范围) String -
openCallback 调用打印工具的成功回调函数 Function Returns the instance of called at that timeVue -
closeCallback 关闭打印工具成功的回调函数 Function Returns the instance of called at that timeVue -
beforeOpenCallback 调用打印工具前的回调函数 Function Returns the instance of called at that timeVue -
url 打印指定的 URL。(不允许同时设置ID) string - -
asyncUrl 通过 'resolve()' 和 Vue 返回 URL Function - -
preview 预览工具 Boolean - false
previewTitle 预览工具标题 String - '打印预览'
previewPrintBtnLabel 预览工具按钮的名称 String - '打印'
zIndex 预览工具CSS:z-index String,Number - 20002
previewBeforeOpenCallback 启动预览工具前的回调函数 Function Returns the instance of Vue -
previewOpenCallback 完全打开预览工具后的回调函数 Function Returns the instance of Vue -
clickMounted 点击打印按钮的回调功能 Function Returns the instance of Vue -

你可能感兴趣的:(vue.js,前端,javascript)