vue-plugin-hiprint
cmd代码
npm install vue-plugin-hiprint
npm i jquery --save-d
main.js
import { hiPrintPlugin } from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
import jquery from 'jquery'
Vue.prototype.$ = jquery
html代码
<el-button type="primary" @click="goPrient()">打 印</el-button>
mounted
mounted(){
this.init()
},
methods代码
methods: {
init() {
const hiprintTemplate_ = new this.$pluginName.PrintTemplate()
this.hiprintTemplate = hiprintTemplate_
},
goPrient() {
// 如果在 main.js 中设置了取消自动连接客户端 是获取不到打印机列表的!!!
if (window.hiwebSocket.opened === false) {
this.$notify.error('打印机客户端未连接,请点击右上角头像下载打印客户端')
}
// 这一句代码 如果打印出来有问题 可以尝试加进去,没有出现 则不用加
// 初始化 provider
this.$pluginName.init({
providers: [defaultElementTypeProvider()]
})
// 这一句代码 如果打印出来有问题 可以尝试加进去,没有出现 则不用加
this.$pluginName.PrintElementTypeManager.buildByHtml(this.$('.ep-draggable-item'))
// 不要使用 this.hiprintTemplate 打印,会出现重复打印,如果要用,请每次打印 都清空内容
const hiprintTemplate_ = new this.$pluginName.PrintTemplate()
const panel = hiprintTemplate_.addPrintPanel({
'height': 9,
'width': 20,
'paperHeader': 0,
'paperFooter': 30,
'paperNumberLeft': 26,
'paperNumberTop': 6,
'paperNumberDisabled': true,
'orient': 1,
'scale': 1
})
// 这一块代码是可以 放在 create 页面创建完成后
// 打印html内容
panel.addPrintHtml({ options: { width: 210, height: 297, top: 0, left: 0, content: '<h3>测试</h3>' } })
// 预览打印
hiprintTemplate_.print()
// 打印机列表
const printerList = hiprintTemplate_.getPrinterList()
console.info('打印机列表', printerList)
// 直接打印 - 不带参数
// hiprintTemplate_.print2()
// 直接打印 带参数
hiprintTemplate_ntTemplate.print2(null, {
printer: 'PCL6 V4 Driver for Universal Print', // 指定打印机 打印机 名称
title: '打印任务名称',
color: false, // 是否打印颜色 默认 true
copies: 1, // 打印份数 默认 1
});
}
}