利用html2canvas插件实现截图指定节点并下载

首先得先安装html2canvas插件,然后编写自己的页面布局。（我这里随便写了一下）

根据自己需求布局页面

  <div class="home">
    <div class="home-content">
      <div class="home-box" ref="homeBox">
        <h3>李小二在线收集</h3>
      </div>
      <div class="home-btn" @click="homeClick">点击下载</div>
    </div>
  </div>

编写js代码实现功能

<script lang="ts" setup>
import { ref } from "vue";
import html2canvas from "html2canvas";
const homeBox = ref<HTMLElement | null>(null);
const homeClick = () => {
  if (homeBox.value) {
    html2canvas(homeBox.value).then((canvas) => {
      const dataURL = canvas.toDataURL("image/png");
      const link = document.createElement("a");
      link.href = dataURL;
      link.download = "screenshot.png";
      link.click();
    });
  }
};
</script>

示例图