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

app端是无法使用html2canvas, 因为，app端不支持浏览器js。
为了解决这个办法，我们可以引入renderjs，可以帮助我们在app端内使用浏览器对象
将页面内容生产图片有两种方式：
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-idconst 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,"保存成功");//以图片的形式 分享到第三方appplus.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，将页面生成图片打印的两种方式相关推荐

不同的电脑打印预览不同怎么解决_条码打印软件中标签预览正常打印无反应怎么解决...
在使用条码打印软件制作标签时,有客户反馈,标签打印预览正常的,但是打印无反应,咨询是怎么回事?今天针对这个情况,可以参考以下方法进行解决. 一.预览正常情况下,打印没反应 (1)在条码打印软件中设计好 ...
Mybatis打印调试sql的两种方式
问题描述在使用mybatis进行开发的时候,由于可以动态拼接sql,这样大大方便了我们.但是也有一定的问题,当我们动态sql拼接的块很多的时候,我们要想从*mapper.xml中直接找出完整的sql ...
条码打印软件如何连接得力条码机打印条形码
很多小伙伴在使用条码打印软件时不知道如何直接连接自己的条码机打印条形码二维码标签,首先要知道条码打印软件是通过打印机驱动连接相关条码机实现数据打印的,所以用条码打印软件连接条码机打印条码二维码标签之前 ...
python环境变量配置_Python的安装、认识、配置环境变量以及helloworld打印的两种方式
Python的安装.认识.配置环境变量以及helloworld打印的两种方式一. 安装和配置环境变量首先我们去到Python的官方下载地址根据自己的电脑机型来下载最新的python安装包,网址是h ...
Http调用第三方接口的两种方式实例《超详细！！！》***
Http调用第三方接口的两种方式<超详细!!!>* 最近在公司做一些调用第三方接口的工作,查阅了一部分的资料和向前辈以及朋友请教,完成了第三方接口的调用,其实主要是通过第三方提供的文档,完 ...
两种方式实现线程通信:三个线程交替打印AABBCC
多线程之间是抢占资源的,使用线程通信可以达到线程按序执行的目的线程共享资源类, 首先创建一个资源类, 包含三个打印的方法以及首次打印的字符串多个线程访问,方法加synchronized同步锁 cl ...
婚礼照片现场自动打印软件即拍即有摄影打印软件非常合拍打印
婚礼照片现场自动打印软件即拍即有摄影打印软件非常合拍打印
uni-app.02.提交form表单的两种方式
提交form表单的两种方式 uni-app提交form表单的两种方式 form表单元素较少前端代码举例后端代码举例 form表单元素较多前端代码举例: 后端java代码举例 uni-app提交f ...
条码打印软件如何使用Excel表批量打印条码标签
由于时代的发展,现在的印刷行业中批量生成可变数据标签并批量打印已经成为一项非常重要的工作.同时在条码打印软件中,使用数据库导入批量生成可变数据标签并批量打印也是专业的条码打印软件中的基础功能.本文我们 ...
java调用打印机的两种方式
一.用java中自带的PrintServiceLookup实现 import javax.imageio.ImageIO; import javax.print.*; import javax.pri ...

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

以下是封装的组件

html部分

js

uniapp调起打印机（调起第三方打印软件）适用app，将页面生成图片打印的两种方式相关推荐

最新文章

热门文章