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

以下是封装的组件

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.com/",    
					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>  
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值