admin管理员组文章数量:1599275
最近的项目有手持终端打印小票和电脑连接诶打印机打印信息
方法有很多种的:
一. 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/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打印功能 手持终端打印小票,电脑连接打印机打印预览 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728318463a1153663.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论