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

方法有很多种的：

一. 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',// 标签元素id
        type: '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.5mm
            for (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}`

            )

# vue.js # javascript # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

详解Spring Boot的RedisAutoConfiguration配置

avatar 华为云开发者联盟
cover

技术解密Java Chassis 3超实用的可观测性

avatar 华为云开发者联盟
cover

揭秘华为云运维中心，如何守护全球10亿用户的智慧生活体验？

avatar 华为云开发者联盟