uu
This commit is contained in:
aihe
parent
d1098f2659
commit
cacea1a704
@ -173,7 +173,32 @@ const getImageTempFilePath = (options) => {
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
const canvasGetImageData = (params = {})=> {
|
||||
return new Promise((resolve, reject)=> {
|
||||
uni.canvasGetImageData({
|
||||
x: 0,
|
||||
y: 0,
|
||||
...params,
|
||||
success(res) {
|
||||
console.log("img====",res);
|
||||
resolve(res)
|
||||
if(res.data) {
|
||||
let data = res.data
|
||||
resolve(res);
|
||||
} else {
|
||||
showToast('canvasGetImageData:失败')
|
||||
reject('canvasGetImageData:失败')
|
||||
}
|
||||
},
|
||||
fail(err){
|
||||
showToast('canvasGetImageData:失败')
|
||||
console.log("canvasGetImageData:失败====", err);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export {
|
||||
reLaunch,
|
||||
@ -190,4 +215,6 @@ export {
|
||||
saveNetFile,
|
||||
saveFile,
|
||||
getImageTempFilePath,
|
||||
canvasGetImageData,
|
||||
getImageInfo
|
||||
}
|
||||
|
||||
@ -3,14 +3,30 @@
|
||||
<template v-slot:button>
|
||||
<u-button @click="handlePrint" type="primary" :disabled="!(blueToothData.deviceId && blueToothData.serviceId && blueToothData.characteristicId)">打印</u-button>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<view class="pt-20 pb-10">打印内容</view>
|
||||
<view class="canvas-con">
|
||||
<canvas canvas-id="shareCanvas" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
</tpx-bluetooth>
|
||||
<canvas canvas-id="shareCanvas" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
|
||||
|
||||
<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 } from "@/common/untool"
|
||||
import { showLoading, showToast, hideLoading, canvasGetImageData, getImageInfo } from "@/common/untool"
|
||||
import * as printJob from './print/printJob'
|
||||
|
||||
|
||||
export default {
|
||||
props:{
|
||||
imageUrl: {
|
||||
@ -18,16 +34,11 @@ export default {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
canvasWidth: {
|
||||
paperWidth: {
|
||||
default () {
|
||||
return 320
|
||||
}
|
||||
},
|
||||
canvasHeight: {
|
||||
default () {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
||||
@ -35,6 +46,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
canvasId: 'shareCanvas',
|
||||
canvasWidth: 1,
|
||||
canvasHeight: 1,
|
||||
imgData: '',
|
||||
percentage: 0, // 打印进度
|
||||
threshold: 200, // 阈值(值越大,图片打印越深)
|
||||
@ -57,15 +70,16 @@ export default {
|
||||
// 打印
|
||||
async handlePrint(){
|
||||
const that = this
|
||||
// showLoading('正在打印')
|
||||
const opt = {
|
||||
...this.blueToothData,
|
||||
onProgress: (percentage) => {
|
||||
console.log("打印进度====", percentage)
|
||||
that.percentage = percentage
|
||||
|
||||
},
|
||||
lasterSuccess: () => {
|
||||
that.percentage = 0
|
||||
hideLoading()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '数据已发送完，请检查打印的内容是否正常',
|
||||
@ -73,8 +87,12 @@ export default {
|
||||
confirmText: '好的',
|
||||
});
|
||||
},
|
||||
onError: ()=> {
|
||||
that.percentage = 0
|
||||
showToast(`打印异常`)
|
||||
hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
console.log('====this.imgData===', this.imgData)
|
||||
//打印图片
|
||||
printJob.printImage(
|
||||
@ -93,92 +111,42 @@ export default {
|
||||
// wx.chooseImage({
|
||||
// success: (res) => {
|
||||
// const tempFilePath = res.tempFilePaths[0];
|
||||
// wx.getImageInfo({
|
||||
// src: tempFilePath,
|
||||
// success: (res) => {
|
||||
// // 打印宽度须是8的整数倍，这里处理掉多余的，使得宽度合适，不然有可能乱码
|
||||
// const mw = this.data.paperWidth % 8;
|
||||
// const w = mw === 0 ? this.data.paperWidth : this.data.paperWidth - mw;
|
||||
// // 等比算出图片的高度
|
||||
// const h = Math.floor((res.height * w) / res.width);
|
||||
// // 设置canvas宽高
|
||||
// this.setData({
|
||||
// img: tempFilePath,
|
||||
// canvasHeight: h,
|
||||
// canvasWidth: w,
|
||||
// });
|
||||
// // 在canvas 画一张图片
|
||||
// ctx.fillStyle = 'rgba(255,255,255,1)';
|
||||
// ctx.clearRect(0, 0, w, h);
|
||||
// ctx.fillRect(0, 0, w, h);
|
||||
// ctx.drawImage(tempFilePath, 0, 0, w, h);
|
||||
// ctx.draw(false, () => {
|
||||
// wx.hideLoading();
|
||||
// });
|
||||
// },
|
||||
// fail: (res) => {
|
||||
// console.log('get info fail', res);
|
||||
// wx.hideLoading();
|
||||
// },
|
||||
// });
|
||||
|
||||
// },
|
||||
// });
|
||||
// },
|
||||
getImageZip(params = {}) {
|
||||
return new Promise((resolve, reject)=> {
|
||||
uni.canvasGetImageData({
|
||||
x: 0,
|
||||
y: 0,
|
||||
...params,
|
||||
success(res) {
|
||||
console.log("img====",res);
|
||||
if(res.data) {
|
||||
let data = res.data
|
||||
console.log("image data====", data);
|
||||
resolve(data);
|
||||
} else {
|
||||
showToast('获取图片信息异常:getImageZip')
|
||||
reject('获取图片信息异常:getImageZip')
|
||||
}
|
||||
},
|
||||
fail(err){
|
||||
showToast('获取图片信息异常:getImageZip')
|
||||
console.log("canvasGetImageData:失败====", err);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
renderCanvasImg() {
|
||||
let filePath = this.imageUrl
|
||||
let that = this
|
||||
return new Promise((resolve, reject)=> {
|
||||
const cxt = uni.createCanvasContext(that.canvasId, that);
|
||||
let scla = 1
|
||||
uni.getImageInfo({
|
||||
src: filePath,
|
||||
success(res) {
|
||||
console.log("获取图片信息成功=====", res)
|
||||
// 按原图比例算出 新的画图高度
|
||||
let height = that.canvasHeight
|
||||
if(!height) {
|
||||
height = parseInt(that.canvasWidth * (res.height / res.width))
|
||||
that.$emit("update:canvasHeight", height)
|
||||
}
|
||||
cxt.drawImage(res.path, 0, 0, that.canvasWidth, height);
|
||||
console.log("开始绘制图片===")
|
||||
cxt.draw(true, ()=> {
|
||||
console.log("绘制图片结束===")
|
||||
setTimeout( async ()=> {
|
||||
let data = await that.getImageZip({ canvasId: that.canvasId, width: that.canvasWidth, height, })
|
||||
resolve(data)
|
||||
}, 1000)
|
||||
});
|
||||
},
|
||||
fail(e) {
|
||||
console.log("获取图片信息失败=====", e)
|
||||
reject(e)
|
||||
}
|
||||
})
|
||||
showLoading()
|
||||
return new Promise(async (resolve, reject)=> {
|
||||
try{
|
||||
let res = await getImageInfo(filePath)
|
||||
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);
|
||||
this.canvasWidth = w
|
||||
this.canvasHeight = h
|
||||
// 在canvas 画一张图片
|
||||
// ctx.fillStyle = 'rgba(255,255,255,1)';
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
ctx.drawImage(filePath, 0, 0, w, h);
|
||||
ctx.draw(false, () => {
|
||||
setTimeout( async ()=> {
|
||||
let { data } = await canvasGetImageData({ canvasId: that.canvasId, width: w, height: h, })
|
||||
hideLoading()
|
||||
resolve(data)
|
||||
}, 1000)
|
||||
});
|
||||
}catch(e){
|
||||
hideLoading()
|
||||
reject(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -186,10 +154,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.canvas-con{
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
/*图片隐藏到窗口外*/
|
||||
canvas {
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
top: -999px;
|
||||
// position: absolute;
|
||||
// z-index: -999;
|
||||
// top: -999px;
|
||||
}
|
||||
</style>
|
||||
@ -91,6 +91,7 @@
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
</template>
|
||||
</tpx-layout>
|
||||
@ -149,6 +150,8 @@ export default {
|
||||
mounted () {
|
||||
// 初始化蓝牙模块
|
||||
this.openBluetoothAdapter()
|
||||
// 自动搜索设备
|
||||
this.discoveryPrinter()
|
||||
},
|
||||
unmounted() {
|
||||
this.stopDiscoveryPrinter()
|
||||
@ -179,7 +182,7 @@ export default {
|
||||
_this.devices = []
|
||||
_this.searchLoading = true
|
||||
_this.curTab = 0
|
||||
uni.startBluetoothDevicesDiscovery({
|
||||
uni?.startBluetoothDevicesDiscovery?.({
|
||||
complete (e) {
|
||||
console.log(e)
|
||||
if (e.errMsg == "startBluetoothDevicesDiscovery:ok") {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<tpx-page>
|
||||
<tpx-bluetooth-print v-if="!pageLoading" :imageUrl="queryOption.imageUrl" :canvasWidth="queryOption.canvasWidth"
|
||||
v-model:canvasHeight="queryOption.canvasHeight"
|
||||
<tpx-bluetooth-print v-if="!pageLoading"
|
||||
:imageUrl="queryOption.imageUrl" :paperWidth="queryOption.paperWidth"
|
||||
></tpx-bluetooth-print>
|
||||
</tpx-page>
|
||||
</template>
|
||||
@ -19,8 +19,7 @@ export default {
|
||||
pageLoading: true,
|
||||
queryOption: {
|
||||
imageUrl: '',
|
||||
canvasWidth: '',
|
||||
canvasHeight: '',
|
||||
paperWidth: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -155,7 +155,7 @@
|
||||
}),
|
||||
async handleSubmit() {
|
||||
let res = await this.getRealGetWaybillPrintData()
|
||||
this.goto(`print/bluetoothPrinter?imageUrl=${res.data.fileUrl}&canvasWidth=${480}`)
|
||||
this.goto(`print/bluetoothPrinter?imageUrl=${res.data.fileUrl}&paperWidth=${480}`)
|
||||
},
|
||||
handleSelAll() {
|
||||
if(this.submitParam.subBillCodeRange.length == this.yundanList.length) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user