vuehtml内容转为图片并下载到本地

需求：将自己写的html内容转化为图片并可以下载到本地

1.安装html2canvas

npm install --save html2canvas

2.在自己所需要的页面进行引入

import html2canvas from "html2canvas";

3.html

1.  
   <div class="popuptop" id="img">
2.  
   <div class="pupupbg">
3.  
   内容内容内容
4.  
   </div>
5.  
   </div>
6.  
   <div class="weixin" @click="downimg">
7.  
   <div class="weixinlogo" >
8.  
   <img src="../../assets/images/mypage/down.png">
9.  
   <p class="weixinshare" >下载</p>
10.  
    </div>
11.  
    </div>
12.  
    <a id="downimg" href="" style="display:none"></a>

4.JS 

1.  
   //下载图片
2.  
   let downimg= ()=>{
3.  
   setTimeout(()=>{
4.  
   proxy.$nextTick(()=>{
5.  
   html2canvas(document.querySelector('#img'),{
6.  
   useCORS: true
7.  
   }).then(canvas => {
8.  
   var url = canvas.toDataURL() //把canvas转成base64
9.  
   // 写一个隐藏的按标签，借助按标签的download属性下载图片
10.  
    document.querySelector('#downimg').href = url
11.  
    document.querySelector('#downimg').download = "我的持仓报告.png"
12.  
    document.querySelector('#downimg').click()
13.  
    })
14.  
    })
15.  
    },2000)
16.  
    }

以上代码就能实现将html内容转为图片并下载到本地。

这篇好文章是转载于：学新通技术网