181 lines
5.1 KiB
Vue
181 lines
5.1 KiB
Vue
<template>
|
||
<tpx-bluetooth-native ref="curBlueTooth">
|
||
<template v-slot:button>
|
||
<u-button @click="handlePrint" type="primary">打印</u-button>
|
||
</template>
|
||
<template v-slot:content>
|
||
<view class="canvas-con">
|
||
<canvas :canvas-id="canvasId" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
|
||
</view>
|
||
</template>
|
||
</tpx-bluetooth-native>
|
||
|
||
<tpx-dialog type="type-dialog" title="打印中" :show="percentage">
|
||
<u-row custom-style="width: 500rpx;min-height: 150rpx;padding: 10rpx;">
|
||
<view>
|
||
<u-line-progress :percentage="percentage" activeColor="#B12D29" height="30"></u-line-progress>
|
||
<view class="pt-20">正在发送数据, 请勿退出页面, 如果卡住了请重连打印机重试</view>
|
||
</view>
|
||
</u-row>
|
||
</tpx-dialog>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { showLoading, showToast, hideLoading, canvasGetImageData, getImageInfo, promiseTimeout } from "@/common/untool"
|
||
import * as canvasUtil from "@/common/canvasUtil"
|
||
import tanexPrinterUniSdk from './nativePrint/tanexPrinterUniSdk'
|
||
import printModule from './nativePrint/print'
|
||
import dayjs from "dayjs"
|
||
|
||
export default {
|
||
props:{
|
||
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
data () {
|
||
return {
|
||
canvasId: uni.$u.guid(20),
|
||
canvasWidth: 1,
|
||
canvasHeight: 1,
|
||
imgData: '',
|
||
percentage: 0, // 打印进度
|
||
imageUrl: '',
|
||
paperWidth: 560,
|
||
}
|
||
},
|
||
mounted () {
|
||
this.initData()
|
||
},
|
||
unmounted() {
|
||
},
|
||
methods: {
|
||
async initData() {
|
||
this.imageUrl && await this.renderCanvasImg(this.imageUrl);
|
||
},
|
||
// 打印
|
||
handlePrint(){
|
||
const that = this
|
||
return new Promise(async (resolve, reject)=> {
|
||
let { bl, deviceId } = that.checkPrintParam()
|
||
if(!bl) {
|
||
return reject('打印参数校验不通过')
|
||
}
|
||
let prtInstance = tanexPrinterUniSdk.createInstance()
|
||
prtInstance.init(that.canvasHeight)
|
||
prtInstance.diyCode(`PAGE-WIDTH 600\r\n`)
|
||
prtInstance.addBitmapByEG(0, 0, that.imgData)
|
||
prtInstance.setPagePrint()
|
||
let commond = prtInstance.getPrintCmd()
|
||
console.log("打印命令组装完成,开始打印=====", commond)
|
||
printModule.print(commond)
|
||
await that.loadPrintProcess()
|
||
// printModule.printTestSimple(deviceId)
|
||
|
||
})
|
||
},
|
||
// 模拟打印进度, 用于加载进度条
|
||
async loadPrintProcess(){
|
||
let that = this
|
||
this.percentage = 0
|
||
let addLen = 10
|
||
for(let i=0; i<100; i = i + addLen) {
|
||
await new Promise((resolve)=> {
|
||
setTimeout(()=> {
|
||
that.percentage = i
|
||
resolve()
|
||
}, 3000/addLen)
|
||
})
|
||
}
|
||
that.percentage = 0
|
||
that.showToast('数据发送完毕')
|
||
},
|
||
renderCanvasImg(filePath) {
|
||
let that = this
|
||
showLoading()
|
||
console.log("===renderCanvasImg:filePath=====", filePath)
|
||
return new Promise(async (resolve, reject)=> {
|
||
try{
|
||
let res = await getImageInfo(filePath)
|
||
console.log("getImageInfo res====", res)
|
||
const ctx = uni.createCanvasContext(that.canvasId, that);
|
||
// 打印宽度须是8的整数倍，这里处理掉多余的，使得宽度合适，不然有可能乱码
|
||
const remainder = that.paperWidth % 8;
|
||
const w = remainder === 0 ? that.paperWidth : that.paperWidth - remainder;
|
||
// 等比算出图片的高度
|
||
const h = Math.floor((res.height * w) / res.width);
|
||
that.canvasWidth = w
|
||
that.canvasHeight = h
|
||
// 在canvas 画一张图片
|
||
let imgRect = canvasUtil.containImg(0, 0, w, h, res.width, res.height)
|
||
let ctData = [imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight]
|
||
ctx.fillStyle = 'rgba(255,255,255,1)';
|
||
ctx.clearRect(...ctData);
|
||
ctx.fillRect(...ctData);
|
||
// 把原图缩放到 打印宽度的比例 绘制
|
||
ctx.drawImage(filePath, ...ctData);
|
||
ctx.draw(false, async() => {
|
||
// await promiseTimeout(1000)
|
||
let imgData = await canvasGetImageData({ canvasId: that.canvasId, width: w, height: h, })
|
||
hideLoading()
|
||
that.imgData = imgData
|
||
console.log("canvasGetImageData imgData.data.length =====", imgData.data.length)
|
||
// 多次渲染，createCanvasContext，必须使用新的才可以
|
||
that.canvasId = uni.$u.guid(20)
|
||
resolve()
|
||
});
|
||
}catch(e){
|
||
// 多次渲染，createCanvasContext，必须使用新的才可以
|
||
that.canvasId = uni.$u.guid(20)
|
||
hideLoading()
|
||
reject(e)
|
||
}
|
||
})
|
||
},
|
||
checkPrintParam() {
|
||
let msg = '', bl = false
|
||
let { deviceId, isStateOn } = this.$refs.curBlueTooth.getConData()
|
||
!this.imgData && (msg = '打印内容不能为空，请重试')
|
||
if(!msg && !(deviceId && isStateOn)) {
|
||
msg = '未连接打印设备'
|
||
}
|
||
msg && (showToast(msg))
|
||
return {
|
||
deviceId,
|
||
msg,
|
||
bl: !msg
|
||
}
|
||
},
|
||
// 给外部调用api，打印自定义图
|
||
async callPrint({ paperWidth, imageUrl } = {}) {
|
||
try{
|
||
this.paperWidth = paperWidth
|
||
if(this.imageUrl != imageUrl || !this.imgData) {
|
||
this.imageUrl = imageUrl
|
||
await this.renderCanvasImg(this.imageUrl);
|
||
}
|
||
let conSta = await this.$refs.curBlueTooth.autoConnect()
|
||
if(conSta) {
|
||
await this.handlePrint()
|
||
return true
|
||
}
|
||
} catch(e){
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.canvas-con{
|
||
width: 100%;
|
||
}
|
||
/*图片隐藏到窗口外*/
|
||
canvas {
|
||
position: absolute;
|
||
z-index: -999;
|
||
top: -999px;
|
||
}
|
||
</style> |