最近的项目有手持终端打印小票和电脑连接诶打印机打印信息
方法有很多种的：
一. 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发行包 /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}`
)
