uu
This commit is contained in:
aihe
parent
d4592accf7
commit
8bd5d45490
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<view class="canvas-con">
|
||||
<canvas :canvas-id="canvasId" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { showLoading, showToast, hideLoading, canvasGetImageData, getImageInfo, promiseTimeout } from "@/common/untool"
|
||||
import * as canvasUtil from "@/common/canvasUtil"
|
||||
|
||||
export default {
|
||||
props:{
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
canvasId: uni.$u.guid(20),
|
||||
canvasWidth: 1,
|
||||
canvasHeight: 1,
|
||||
imgData: '',
|
||||
imageUrl: '',
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData()
|
||||
},
|
||||
unmounted() {
|
||||
},
|
||||
methods: {
|
||||
async initData() {
|
||||
this.imageUrl && await this.renderCanvasImg(this.imageUrl);
|
||||
},
|
||||
renderCanvasImg(filePath, paperWidth) {
|
||||
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 = paperWidth % 8;
|
||||
const w = remainder === 0 ? paperWidth : 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() => {
|
||||
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({
|
||||
imgData,
|
||||
width: w,
|
||||
height: h
|
||||
})
|
||||
});
|
||||
}catch(e){
|
||||
// 多次渲染，createCanvasContext，必须使用新的才可以
|
||||
that.canvasId = uni.$u.guid(20)
|
||||
hideLoading()
|
||||
reject(e)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.canvas-con{
|
||||
width: 100%;
|
||||
}
|
||||
/*图片隐藏到窗口外*/
|
||||
canvas {
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
top: -999px;
|
||||
}
|
||||
</style>
|
||||
@ -51,7 +51,8 @@ var tanexPrinter = {
|
||||
/*
|
||||
[名称] 开始命令
[格式] ！ {offset} 200 200 {height} {qty}
[说明] {offset}：整个标签的水平偏移量
200：水平分辨率，203 点/英寸（8 点/mm）
200：垂直分辨率，203 点/英寸（8 点/mm）
{height}:标签最大高度，点为单位
{qty}:打印标签的数量，最大1024 张
[实例] Input： Output：
! 0 200 200 210 1
TEXT 4 0 30 40 Hello World Hello World
FORM
PRINT
|
||||
*/
|
||||
tanexPrinter.init = function(maxHeight) {
|
||||
tanexPrinter.init = function(maxHeight = 1040) {
|
||||
// 1040 一页打印纸的高度
|
||||
data = " ! 0 200 200 " + maxHeight + " 1\r\n"
|
||||
tanexPrinter.addCommand(data)
|
||||
};
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
<template>
|
||||
<tpx-bluetooth-native ref="curBlueTooth">
|
||||
<template v-slot:content>
|
||||
<view class="canvas-con">
|
||||
<canvas :canvas-id="canvasId" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:content></template>
|
||||
</tpx-bluetooth-native>
|
||||
|
||||
<tpx-dialog type="type-dialog" title="打印中" :show="percentage">
|
||||
<!-- 打印进度 -->
|
||||
<tpx-dialog type="type-dialog" title="打印中" :show="prtPercentage">
|
||||
<u-row custom-style="width: 500rpx;min-height: 150rpx;padding: 10rpx;">
|
||||
<view>
|
||||
<u-line-progress :percentage="percentage" activeColor="#B12D29" height="30"></u-line-progress>
|
||||
<u-line-progress :percentage="prtPercentage" activeColor="#B12D29" height="30"></u-line-progress>
|
||||
<view class="pt-20">正在发送数据, 请勿退出页面, 如果卡住了请重连打印机重试</view>
|
||||
</view>
|
||||
</u-row>
|
||||
@ -34,13 +31,9 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
canvasId: uni.$u.guid(20),
|
||||
canvasWidth: 1,
|
||||
canvasHeight: 1,
|
||||
imgData: '',
|
||||
percentage: 0, // 打印进度
|
||||
imageUrl: '',
|
||||
prtPercentage: 0, // 打印进度
|
||||
paperWidth: 480,
|
||||
imgRes: {},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@ -50,7 +43,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async initData() {
|
||||
this.imageUrl && await this.renderCanvasImg(this.imageUrl);
|
||||
},
|
||||
// 打印
|
||||
handlePrint(){
|
||||
@ -61,80 +53,23 @@ export default {
|
||||
return reject('打印参数校验不通过')
|
||||
}
|
||||
let prtInstance = tanexPrinterUniSdk.createInstance()
|
||||
prtInstance.init(that.canvasHeight)
|
||||
prtInstance.diyCode(`PAGE-WIDTH 600\r\n`)
|
||||
prtInstance.addBitmapByEG(0, 0, that.imgData)
|
||||
// prtInstance.init(that.imgRes.height)
|
||||
// prtInstance.diyCode(`PAGE-WIDTH 600\r\n`)
|
||||
prtInstance.addBitmapByEG(0, 0, that.imgRes.imgData)
|
||||
prtInstance.setPagePrint()
|
||||
let commond = prtInstance.getPrintCmd()
|
||||
console.log("打印命令组装完成,开始打印=====", commond)
|
||||
printModule.print(commond)
|
||||
that.showToast('数据发送成功，如果无法打印请重连设备重试')
|
||||
resolve(true)
|
||||
// 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 = '打印内容不能为空，请重试')
|
||||
!this.imgRes.imgData && (msg = '打印内容不能为空，请重试')
|
||||
if(!msg && !(deviceId && isStateOn)) {
|
||||
msg = '未连接打印设备'
|
||||
}
|
||||
@ -146,16 +81,12 @@ export default {
|
||||
}
|
||||
},
|
||||
// 给外部调用api，打印自定义图
|
||||
async callPrint({ paperWidth, imageUrl } = {}) {
|
||||
async callPrint({ paperWidth, imgRes } = {}) {
|
||||
try{
|
||||
this.paperWidth = paperWidth || this.paperWidth
|
||||
if(this.imageUrl != imageUrl || !this.imgData) {
|
||||
this.imageUrl = imageUrl
|
||||
await this.renderCanvasImg(this.imageUrl);
|
||||
}
|
||||
this.imgRes = imgRes
|
||||
let conSta = await this.$refs.curBlueTooth.autoConnect()
|
||||
this.$emit('autoConnectCallback', conSta)
|
||||
|
||||
if(conSta) {
|
||||
await this.handlePrint()
|
||||
return true
|
||||
@ -168,13 +99,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.canvas-con{
|
||||
width: 100%;
|
||||
}
|
||||
/*图片隐藏到窗口外*/
|
||||
canvas {
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
top: -999px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
|
||||
<!-- 打印预览 -->
|
||||
<tpx-dialog
|
||||
v-model:show="previewModel.show"
|
||||
@ -41,12 +40,14 @@
|
||||
</view>
|
||||
</tpx-dialog>
|
||||
|
||||
<create-image-data-bycanvas ref="curCanvas"></create-image-data-bycanvas>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import RenderTemplate from "./render-template-native"
|
||||
import { promiseTimeout } from "@/common/untool"
|
||||
import CreateImageDataBycanvas from "./create-image-data-bycanvas"
|
||||
|
||||
export default {
|
||||
props:{
|
||||
@ -55,7 +56,7 @@ export default {
|
||||
computed: {
|
||||
},
|
||||
components: {
|
||||
RenderTemplate, RenderTemplate
|
||||
RenderTemplate, RenderTemplate, CreateImageDataBycanvas
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@ -100,8 +101,9 @@ export default {
|
||||
}
|
||||
},
|
||||
async confirmPrint(){
|
||||
let imgRes = await this.$refs.curCanvas.renderCanvasImg(this.imageUrl[0], this.paperWidth)
|
||||
let res = await this.$refs.curPrint.callPrint({
|
||||
imageUrl: this.imageUrl[0],
|
||||
imgRes,
|
||||
paperWidth: this.paperWidth
|
||||
})
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user