将网页的dom节点转换成img并下载下来

这里需要用到一个依赖html2canvas,使用npm安装即可:

npm install html2canvas --save-dev

然后在页面中引入即可使用。

利用了a标签的下载功能
dom保存为img的代码如下

 function saveAsImg()  {
    // 先获取你要转换为img的dom节点    
    var node = document.getElementById('app');
    // html2canvas接收dom节点,返回canvas,即node生成的canvas
    html2canvas(node).then((canvas){
      var url = canvas.toDataURL();
      var a=document.createElement('a');
      a.download='今日日报';//设置图片名称
      var event = new MouseEvent('click');
      a.href=url;
      a.dispatchEvent(event);//触发a的单击事件
    });
  }

猜你喜欢

转载自blog.csdn.net/weixin_42420703/article/details/82704140