html2canvas 使用方法，uniappvue将页面部分转化为图片

Posted 2021-06-18 三线码工

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() {
            this.generatorImage()
        },
        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长按就可以下载图片了