uniapp调起打印机(调起第三方打印软件)适用app,将页面生成图片打印的两种方式

编程入门 行业动态 更新时间:2024-10-25 19:24:48

以下是封装的组件

html部分

 <view style="position: relative;width: 120px;height: 35px;overflow: hidden;">  
		<view class="test_btn" @click="canvas.createPoster">打印</view>
		<canvas canvas-id="myCanvas" id="myCanvas" :style="{position:'absolute',width:canvasObj.width+'px',height:canvasObj.height+'px'}"></canvas>
    </view>  

js

  1. app端是无法使用html2canvas, 因为,app端不支持浏览器js。
  2. 为了解决这个办法,我们可以引入renderjs,可以帮助我们在app端内使用浏览器对象
  3. 将页面内容生产图片有两种方式:
    1⃣️用html2canvas,
    2⃣️用截屏的方式,缺点是会截到多余的内容,具体实现方式看以下函数getScreen()里的内容
<script module="canvas" lang="renderjs">
	import html2canvas from 'html2canvas'; 
    export default {
		data(){
			return {
			}
		},
		props:{
			element:{
				type:String
			}
		},
        methods: {
			createPoster(event, ownerInstance) {
				// 生成海报  
				const domObj = document.getElementById("content");
				html2canvas(domObj, {
					useCORS: true,
					logging: false,
					letterRendering: true,
					proxy: "http://oss.licai521/",    
					allowTaint:true, 
					onclone(doc) {
						let e = doc.querySelector("#content");
						e.style.display = "block";
					},
				}).then(function (canvas) { 
					var posterImg = canvas.toDataURL("image/png",1);
					ownerInstance.callMethod('creates', {	
						posterImg: posterImg
					})		
				}).catch(err => {
					console.log(err)
				})
			},
        }
    }
</script>

<script>  
import html2canvas from 'html2canvas'; 
export default {  
    data() {  
        return {  
			posterImg:""
        };  
    },  
	props:{
		canvasObj:{
			type:Object
		}
	},
    methods: {  
    	//canvas生成图片
		creates(option){
			//这里就接收到了图片的路径。直接就可以拿到页面dom上去渲染了。
			this.posterImg=option.posterImg;
			   // 获取页面上的canvas标签的canvas-id
			const ctx = uni.createCanvasContext('myCanvas');
			// 绘制图片(背景图要首先绘制,不然会被遮盖)
			ctx.drawImage(this.posterImg, 0, 0,this.canvasObj.width,this.canvasObj.height);
			 // 绘制整图
			ctx.draw(false, () => {
				// 把canvas生成为图片
				uni.canvasToTempFilePath({
					x:0,
					y:0,
					width: this.canvasObj.width,
					height:this.canvasObj.height,
					canvasId: 'myCanvas',
					success: (response) => {
						uni.saveImageToPhotosAlbum({
							filePath: response.tempFilePath,
							success: (response) => {
								console.log(response,"保存成功");
								//以图片的形式 分享到第三方app
								plus.share.sendWithSystem({pictures:[response.file]}, function(){
									console.log('分享成功');
								}, function(e){
									console.log('分享失败:'+JSON.stringify(e));
								});
							},
							fail: (response) => {
								uni.openSetting({
									success: (response) => {
										if(!response.authSetting['scope.writePhotosAlbum']) {
											nui.showModal({
												title: '提示',
												content: '获取权限成功,再次点击图片即可保存',
												showCancel: false
											})
										} else {
											nui.showModal({
												title: '提示',
												content: '获取权限失败,无法保存',
												showCancel: false
											})
										}
									}
								})
							}
						})
					},
					fail: (response) => {
						console.log(response);
					}
				})
			})
		
			
		},
		//截屏生成图片
		getScreen(){
			let pages = getCurrentPages();  
			let page = pages[pages.length - 1];  
			let ws = page.$getAppWebview();  
			let bitmap = new plus.nativeObj.Bitmap('drawScreen');  
			// 将webview内容绘制到Bitmap对象中  
			ws.draw(bitmap, () => {  
			  // 保存图片到本地  
				bitmap.save("_doc/drawScreen.jpg", {  
					overwrite: true  
				}, res => {  
					
				uni.saveImageToPhotosAlbum({
					filePath: res.target,
					success: (res) => {
						uni.showToast({
							title: '保存成功'
						})
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '保存名片码失败'
						})
					}
				})
				plus.share.sendWithSystem({content:"打印"}, function(){
					console.log('分享成功');
				}, function(e){
					console.log('分享失败:'+JSON.stringify(e));
				});
			    bitmap.clear(); // 清除Bitmap对象  
			  }, error => {  
			    console.log(JSON.stringify(error)); // 保存失败信息  
			    bitmap.clear(); // 清除Bitmap对象  
			  });  
			  // bitmap.clear(); // 清除Bitmap对象  
			}, error => {  
			  console.log(JSON.stringify(error)); // 绘制失败  
			}, {  
			  check: true, // 设置为检测白屏  
			});
		},
     	
     	//直接打开第三方软件(这里用的是printerShare软件,pname是借助第三方工具找到的 link2sdpluschszqmfb.apk)
		openPrint(){
			plus.runtime.launchApplication({pname: 'com.dynamixsoftware.printershare'  },  
				function(e) {  
					console.log('Open system default browser failed: ' + e.message);  
				}  
			);  
			let url="android.intent.action.VIEW"
			plus.runtime.openURL(url);  
		},
    }  
};  
</script>  

更多推荐

uniapp调起打印机(调起第三方打印软件)适用app,将页面生成图片打印的两种方式

本文发布于:2023-06-14 01:50:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1424187.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:两种   第三方   打印机   页面   方式

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!