vue如何将html内容转为图片并下载到本地

npm install --save html2canvas

import html2canvas from "html2canvas";

<div class="popuptop" id="img">
    <div class="pupupbg">
        内容内容内容
    </div>
</div>
 <div class="weixin" @click="downimg">
     <div class="weixinloGo" >
         <img src="../../assets/images/mypage/down.png">
          <p class="weixinshare" >下载</p>
      </div>
</div>
<a id="downimg" href="" style=" rel="external nofollow" display:none"></a>

//下载图片
let downimg= ()=>{
  setTimeout(()=>{
    proxy.$nextTick(()=>{
      html2canvas(document.querySelector('#img'),{
        useCORS: true
      }).then(canvas => {
        var url = canvas.toDataURL()     //把canvas转成base64
        // 写一个隐藏的按标签，借助按标签的download属性下载图片
        document.querySelector('#downimg').href = url
        document.querySelector('#downimg').download = "我的持仓报告.png"
        document.querySelector('#downimg').click()
      })
    })
  },2000)
}

npm install html2canvas

import html2canvas from 'html2canvas';

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

<template>
    <div>
        <div class="container" ref="imageDom">hahahah</div>
        <button @click="toImage">导出</button>
    </div>
</template>

toImage() {
    html2canvas(this.$refs.imageDom, {
        backgroundColor: '#ffffff'
    }).then(canvas => {
        var imgData = canvas.toDataURL("image/jpeg");
        this.fileDownload(imgData);
    })
},
fileDownload(downloadUrl) {
    let aLink = document.createElement("a");
    aLink.style.display = "none";
    aLink.href = downloadUrl;
    aLink.download = "监控详情.png";
    // 触发点击-然后移除
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink);
},