以下是封装的组件
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/",
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,将页面生成图片打印的两种方式
发布评论