以下是封装的组件

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-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>