vue打印功能手持终端打印小票，电脑连接打印机打印预览

article/2025/9/17 22:42:17

最近的项目有手持终端打印小票和电脑连接诶打印机打印信息

方法有很多种的：

一. vue-print-nb 安装插件

1.安装插件

npm install vue-print-nb --save

2. 在main.js中引入安装的插件

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

3.直接就可以在相应的页面使用

<templete>
<div id="print" >打印测试</div>
<button v-print="'#print'">打印</button>
</templete>

二. print.js

1. 安装插件

npm install print-js --save

二. 使用

import print from 'print-is'<div id='printBill'><!--需要打印的内容-->...<!--需要打印的内容--> 
</div>
<el-button type="primary"  @click="billPrintClick">打印</el-button>billPrintClick(){const style = '@page {margin:0 10mm};'//打印时去掉眉页眉尾//打印为什么要去掉眉页眉尾？因为眉页title时打印当前页面的title，相当于是获取html中title标签里面的内容，但是比如我打印的内容只是一个弹框里面的内容，是没有title的，这时候就会出现undefined，为了避免出现这种情况，就可以隐藏眉页眉尾printJS({printable: 'printBill',// 标签元素idtype: 'html',header: '',targetStyles: ['*'],style});//各个配置项//printable:要打印的id。//type:可以是 html 、pdf、 json 等。//properties:是打印json时所需要的数据属性。//gridHeaderStyle和gridStyle都是打印json时可选的样式。//repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。//scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用，此时自己设置的原来想要打印的样式就会失效，在打印预览时可以看到效果//targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。//style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。//ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用},

三. 使用插件 lodop

1.官网下载打印组件lodop发行包 http://www.lodop.net/download.html

2.解压进行安装

3.把官方提供的LodopFuncs.js文件保存在项目的目录下

4.在页面中引入使用

import { getLodop } from '../../assets/LodopFuncs' // 导入模块

   isPrint() {this.btnClickPrint()},btnClickPrint: function() {let LODOP = getLodop() // 调用getLodop获取LODOP对象if (!LODOP) {this.$alert('c-lodop服务未启动！', '警告', {confirmButtonText: '确定'// callback: action => {//     this.$message({//         type: 'info',//         message: `action: ${ action }`//     })// }})return}var count = LODOP.GET_PRINTER_COUNT()if (count == 0) {return this.$message.error('请先连接打印机!')}let strBodyStyle = `<style>table{border-collapse: collapse;font-family: '楷体';}table,table tr td {border:1px solid #000;}table tr td{padding: 2px 3px;}</style>`const template = `<table border="1" width= "265 " height="150" style="font-size: 12px"><tr><td   width= "65% " align="center">产品代码:${this.product_code}</td><td   width= "35% "  rowspan="2"></td></tr></table>`let strPrintHtml = strBodyStyle + '<body>' + template + '</body>'// console.log(strPrintHtml)LODOP.PRINT_INIT('打印')LODOP.SET_PRINT_PAGESIZE(1, 700, 400, '') // 这里3表示纵向打印且纸高“按内容的高度”；580表示纸宽58mm；45表示页底空白4.5mmfor (let i = 0; i < 1; i++) {LODOP.NewPage()LODOP.ADD_PRINT_HTM('0mm', '0mm', '100%', '100%', strPrintHtml)}LODOP.ADD_PRINT_BARCODE(10,200,65,70,'QRCode',`${this.codeId}`)LODOP.SET_PRINT_STYLEA(0, 'DataCharset', 'UTF-8')LODOP.SET_LICENSES('', '15F0BE661E7F39DF7491843CB2514F3D', '', '')// LODOP.PRINT() //这个是直接打印不用预览LODOP.PREVIEW() //这个是预览功能setTimeout(() => {this.$nextTick(() => {this.$refs.input.focus()location.reload()})}, 3000)}

// LODOP.PRINT() //直接打印，不用预览

LODOP.PREVIEW() //先预览

打印二维码

LODOP.ADD_PRINT_BARCODE(

10,

200,

65,

70,

'QRCode',

`${this.codeId}`

)