html2canvas 使用方法,uniapp、vue将页面部分转化为图片
1.安装
npm i html2canvas
2.代码
<template> <view> <view class="print " @click="generatorImage" > <span style="font-size: 30px;">打印</span> </view> <view class="content" ref="addImage"> <div ref="capture" > 需要保存的html页面 <image src="../../static/icon/person3.png" mode="widthFix"></image> </div> </view> <image :src="imgs" mode="widthFix"></image> </view> </template> <script> import html2canvas from 'html2canvas'; export default { data() { return { } }, onLoad() {}, mounted() {
setTimeout(()=>{
this.generatorImage()
},1000)
}, methods: { generatorImage() { html2canvas(this.$refs.capture).then(canvas => {
// this.$refs.addImage.append(canvas);//在下面添加canvas节点 pc端可以转化创建a标签,直接下载 // let link = document.createElement("a"); // link.href = canvas.toDataURL();//下载链接 // console.log(canvas.toDataURL()) // link.setAttribute("download","体检表.png"); // link.style.display = "none";//a标签隐藏 // document.body.appendChild(link); // link.click();
this.imgs= canvas.toDataURL() //base64字符串 放到图片标签上 }); }, } } </script> <style> </style>
绿色部分是要转化成图片的页面,红色的是转化好的图片。h5长按就可以下载图片了
注意事项:必须dome先加载好了,才能转化为图片,所以写了个一秒后执行。
本文来自博客园,作者:三线码工,转载请注明原文链接:https://www.cnblogs.com/shangrao/p/14899203.html