使用html2canvas库对可滚动的dom节点导出全量的图片

最新推荐文章于 2025-09-19 03:45:18 发布

原创最新推荐文章于 2025-09-19 03:45:18 发布 · 565 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端 #javascript

页面的dom节点样式

在这里插入图片描述

想要导出的图片样式

在这里插入图片描述

做法

1，使用html2canvas库

先在项目中安装：npm install html2canvas

在vue文件中引用： import html2canvas from "html2canvas";

2，对于dom节点，不能有overflow： hidden或者 overflow-y：auto的样式设置。

正确写dom的方式是在外层div的类中写样式，内部div用来导出，尽量不要设置样式

<div class="mind-map-scroll-container">
            <div ref="scrollBox">
            ......
            </div>
 </div>
 
.mind-map-scroll-container {
  max-height: 300px; /* 设置最大高度，超出这个高度就会出现滚动条 */
  overflow-y: auto; /* 出现垂直滚动条 */
  position: relative;
  background-color: white;
}

3，主要方法体

// 导出按钮绑定的方法
exportLogs() {
        const node = this.$refs["scrollBox"];
        this.downloadDomPic(
          node,
          `ComputerLog.png`
        );
    },
    downloadDomPic(node, picName) {
      html2canvas(node, { scale: 2, height: node.offsetHeight }).then(
        (canvas) => {
          const a = document.createElement("a");
          a.href = canvas.toDataURL("image/jpg");
          a.download = picName;
          a.click();
        }
      );
    },