uu

components/tpx-bluetooth-print/create-image-data-bycanvas.vue

@@ -1,6 +1,6 @@
 <template>
-	<view class="canvas-con">
+	<view class="canvas-con" :style="convContSty">
-		<canvas :canvas-id="canvasId" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
+		<canvas :canvas-id="canvasId" :style="canvSty"></canvas>
 	</view>	
 </template> 
 
@@ -14,7 +14,20 @@ export default {
 		
 	},
 	computed: {
-		
+		canvSty(){
+			let sty = `width:${this.canvasWidth}px;height:${this.canvasHeight}px;`
+			return sty
+		},
+		convContSty(){
+			// 缩放canvas的父级，绘图可以一屏宽度显示出来
+			let bodyRpxWidth = 750
+			var convRpxWidth = this.canvasWidth/(uni.upx2px(100)/100);
+			let convRpxHeight = this.canvasHeight/(uni.upx2px(100)/100)
+			let scale = bodyRpxWidth * 0.92 / convRpxWidth
+			let sty = `transform-origin: 0 0;transform: scale(${scale});height:${convRpxHeight * scale}rpx;`
+			sty += `margin-left:${bodyRpxWidth * 0.08 / 2}rpx;`
+			return sty
+		}
 	},
 	data () {
 		return {
@@ -87,11 +100,10 @@ export default {
 <style scoped lang="scss">
 	.canvas-con{
 		width: 100%;
+		margin-bottom: 20rpx;
 	}
 	/*图片隐藏到窗口外*/
 	canvas {
-		position: absolute;
+		
-		z-index: -999;
-		top: -999px;
 	}
 </style>

components/tpx-bluetooth-print/tpx-bluetooth-print.vue

@@ -10,13 +10,8 @@
 			<tpx-layout>
 				<template v-slot:header></template>
 				<template v-slot:body>
-					<view v-for="(imgUrl, index) in imageUrl" class="mb-20">
+					<view v-for="(url, index) in canvImages" @click="handlePreview(index)">
-						<!-- canvas绘图后再显示预览图 -->
+						<create-image-data-bycanvas :ref="`curCanvas${index}`"></create-image-data-bycanvas>
-						<view v-if="allImgRes.length > 0">
-							<u-row justify="center" @click="handlePreview(index)">
-								<image :src="imgUrl" mode="widthFix" style="max-width: 100%;"></image>
-							</u-row>
-						</view>
 					</view>
 				</template>
 				<template v-slot:footer>
@@ -43,10 +38,6 @@
 		</view>
 	</tpx-dialog>
 	
-	<view v-for="(url, index) in canvImages">
-		<create-image-data-bycanvas :ref="`curCanvas${index}`"></create-image-data-bycanvas>
-	</view>
-	
 </template> 
 
 <script>

pages/print/courierNote.vue

@@ -243,47 +243,7 @@
 		},
 		methods: {
 			async initEvent(ownerInstance) {
-				// 通过事件委托给按钮添加事件
-				// 添加事件前先清除事件避免重复绑定
-				// $(document).off("touchend")
-				// 新增
-				// $(document).on('touchend', '.add', function() {
-				// 	const wbsId = this.getAttribute('wbsId');
-				// 	const taskId = this.getAttribute('taskId');
-				// 	const taskName = this.getAttribute('taskName');
-				// 	// 调用 service 层的方法
-				// 	ownerInstance.callMethod('toAdd', {
-				// 		wbsId: wbsId,
-				// 		taskId: taskId,
-				// 		taskName: taskName
-				// 	})
-				// });
-				// Create a new PDFDocument
-				const pdfDoc = await PDFDocument.create()
 				
-				// Embed the Times Roman font
-				const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman)
-				
-				// Add a page and draw some text on it
-				const page = pdfDoc.addPage([500, 600])
-				page.setFont(timesRomanFont)
-				page.drawText('The Life of an Egg', { x: 60, y: 500, size: 50 })
-				page.drawText('An Epic Tale of Woe', { x: 125, y: 460, size: 25 })
-				
-				// Set all available metadata fields on the PDFDocument. Note that these fields
-				// are visible in the "Document Properties" section of most PDF readers.
-				pdfDoc.setTitle('🥚 The Life of an Egg 🍳')
-				pdfDoc.setAuthor('Humpty Dumpty')
-				pdfDoc.setSubject('📘 An Epic Tale of Woe 📖')
-				pdfDoc.setKeywords(['eggs', 'wall', 'fall', 'king', 'horses', 'men'])
-				pdfDoc.setProducer('PDF App 9000 🤖')
-				pdfDoc.setCreator('pdf-lib (https://github.com/Hopding/pdf-lib)')
-				pdfDoc.setCreationDate(new Date('2018-06-24T01:58:37.228Z'))
-				pdfDoc.setModificationDate(new Date('2019-12-21T07:00:11.000Z'))
-				
-				// Serialize the PDFDocument to bytes (a Uint8Array)
-				const pdfBytes = await pdfDoc.save()
-				console.log("=========pdfBytes============", pdfBytes)
 			},
 		}
 	}