使用html2canvas把网页保存成图片

1，安装html2canvas

npm install html2canvas --save

2,在需要的页面引入

import html2canvas from 'html2canvas'

3，使用

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

4，如果要下载的话，可以使用a标签来下载，但是ios和微信不支持

html

<a href=""
download="你的账单.png"
id="downimg"
style="display:none">保存账单</a>

js：这里我模拟了a标签的点击

let downbtn = document.getElementById('downimg')
html2canvas(document.getElementById('ten')).then((canvas) => {
 downbtn.href = canvas.toDataURL('image/png')
}).then(() => {
 downbtn.click()
})

5，既然微信和ios不支持下载图片，那怎么解决呢，可以显示出图片，然后提示让用户自己去保存

let ele = document.getElementById('ten')
        html2canvas(ele).then((canvas) => {
          var canvimg = document.createElement('img')
          canvimg.src = canvas.toDataURL('image/png')
          canvimg.style.width = '100%'
          canvimg.style.height = '100%'
          document.getElementById('ten').appendChild(canvimg)
          alert('账单已生成\n请长按保存账单')
        })

6，可以愉快的使用啦！happy ending!