vue2控制打印机打印(一)

发布时间:2023年12月24日

cmd代码

npm install vue-print-nb

main.js全局引入

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

html

<div class="inner" id="printView">
     
</div>
<el-button v-print="printViewInfo" type="primary">打 印</el-button>

data里面的数据

printViewInfo: {
        id: "printView", //打印区域的唯一的id属性
        popTitle: '', // 页眉文字 (不设置时显示undifined)(页眉页脚可以在打印页面的更多设置的选项中取消勾选)
        extraHead: '', // 最左上方的头部文字,附加在head标签上的额外标签,使用逗号分割
        preview: false, // 是否启动预览模式,默认是false (开启预览模式ture会占满整个屏幕,不建议开启,除非业务需要)
        previewTitle: '预览的标题', // 打印预览的标题(预览模式preview为true时才显示)
        previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印(预览模式preview为true时才显示)
        zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
        previewBeforeOpenCallback(that) { console.log('正在加载预览窗口!'); console.log(that.msg, this) }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) (that可以取到data里的变量值)
        previewOpenCallback() { console.log('已经加载完预览窗口,预览打开了!') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
        beforeOpenCallback() { console.log('开始打印之前!') }, // 开始打印之前的callback
        openCallback() { console.log('执行打印了!') }, // 调用打印时的callback
        closeCallback() { console.log('关闭了打印工具!') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() { console.log('点击v-print绑定的按钮了!') },
        url: '', // 打印指定的URL,确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      },
文章来源:https://blog.csdn.net/var_let_const/article/details/135124209
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。