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

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

方法有很多种的：

一. 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}`

)

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

自己的电脑不能连接打印机打印怎么办
近来,自己购买了一台小型的打印机,原本想着打印一些比较简单的东西,可是没有想到使用过程中困难多多,卡纸.打印字迹不清晰等问题一件件接着来,我开始怀疑难道我购买的打印机质量太差劲了吗? 相信不少人在打印 ...
远程计算机打印,win7系统电脑如何远程连接打印机打印文件
打印机设备是办公不可缺少一部分,将有需要的文件打印出来,是很简单一件事情.如果打印机不是连着自己电脑的,这时通常的做法是拿着U盘拷贝到连接打印机的电脑上进行打印,这个方法比较麻烦.其实还有一种很便捷的 ...
Secure CRT自动连接打印机打印乱码问题
最近发现了一件怪事,发现自己的电脑会自动连接打印机打印文件. 关键是打印出来的都是乱码,一行行的电波文,看的脑阔疼. 刚开始还不知道是什么原有导致的. 后来一狠心把打印机给删除了. 第二天,过了一段时 ...
python连接打印机打印文档、图片、pdf文件等
引言 python连接打印机进行打印,可能根据需求的不同,使用不同的函数模块. 如果你只是简单的想打印文档,比如office文档,你可以使用ShellExecute方法,对于微软office的文档.p ...
web页面调用打印机不预览直接执行打印
web页面调用打印机不预览直接执行打印 <%@ page language="java" import="java.util.*" contentType ...
Android 蓝牙连接打印机打印网络图片
实现蓝牙连接打印机打印网络图片经过自己一下午加一个小时的时间整理出来,希望能帮助到各位码兄弟! 主要分为以下几步: 将网络图片URL转为bitmap :其中需要进行网络请求,不可在主线程中进行,需另 ...
关于前端页面连接打印机打印
关于前端连接打印机打印页面代码逻辑代码需要引入JQ 页面代码 <div class="print-Box" ><div id="test" ...
Win10系统电脑连接打印机的设置方法
打印机需要连接电脑后才能正常使用打印等功能,如果电脑没有连接打印机的话那就无法打印文件那些了.现在很多地方都是连接共享打印机了,那么Win10系统电脑怎么连接打印机呢?下面小编就教教大家Win10系统 ...
添加打印机还显示脱机_win7系统电脑连接打印机后显示脱机怎么办
‍‍ 打印机是办公设备中必不可缺少的一部分了,可以帮助用户打印文档和材料.win7旗舰版系统电脑连接打印机后出现无法打印的问题,访问共享打印机显示"打印机为脱机状态",只能删除打印 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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