【点击按钮实现div元素下载成图片】

点击按钮实现div元素下载成图片

场景

比如：想实现点击一个按钮或者是图标，实现对图的下载，或者是dom元素的导出

安装包

package.json

"dependencies": {
 	"html2canvas": "^1.4.1",
}

导入

你想在某个 .vue 文件中使用，就照如下方式引入

import html2canvas from 'html2canvas';

使用

<!--这是你下载的按钮-->
   <button id="downloadButton">
        <span class="iconfont icon-download" @click="downLoadImage"></span>
        <p class="downloadText">Download Chart</p>
   </button>
<!--这是你绘图的div-->
  <div id="heatmapcontainer" style="background-color: #fff;">

#downloadButton .downloadText {
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
#downloadButton:hover .downloadText {
  opacity: 1;
  color: #3e98c5;
}
#downloadButton:hover span{
  color: #3e98c5;
}

    downLoadImage(){
      var buttonElement = document.getElementById('downloadButton');
      if (buttonElement) {
        // buttonElement.remove();
        buttonElement.style.display = 'none';
      }

      const elementToCapture = document.getElementById('heatmapcontainer');
      // 使用 HTML2Canvas 渲染为 Canvas
      html2canvas(elementToCapture).then(canvas => {
        // 创建一个链接 (blob) 来下载 Canvas 图片
        const link = document.createElement('a');
        link.href = canvas.toDataURL('image/png');
        link.download = 'Heatmap.png';

        // 触发点击事件来下载图片
        link.click();
      });
    },

备注：希望可以帮到大家，实际运用中，如有错误，欢迎评论区交流指正！具体绘图的代码我没有贴，如有需要请cue我！