vue2控制打印机打印(一)

原创

已于 2023-12-21 15:45:23 修改 · 875 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-12-21 10:12:47 首次发布

本文介绍了如何在Vue项目中使用vue-print-nb库实现全局打印功能，包括main.js中的全局引入、HTML结构配置以及数据对象的详细设置。重点讲解了预览模式和回调函数的使用。

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.lo