使用html2canvas将页面或某个dom元素保存/下载为图片

npm地址：https://www.npmjs.com/package/html2canvas

官网： https://html2canvas.hertzen.com/ 

使用示例：https://html2canvas.hertzen.com/getting-started 

首先我们先使用html2canvas将某个dom元素为canvas，然后可以调用canvas中的方法，例如：toDataURL将其转为base64编码，或者toBlob转为一个二进制对象等等，然后就随意我们怎么操作了，可以进行下载， 也可以将base64编码赋给img标签src在页面上再渲染出该dom以图片的方式，类似于复制了，下面来说下具体使用：

安装 

pnpm add html2canvas

引入 

import html2canvas from 'html2canvas'

使用 

html2canvas(dom, options).then(canvas => {
  console.log(canvas)
  // base64编码
  const dataUrl = canvas.toDataURL()
  // blob
  canvas.toBlob(blob => {
    console.log(blob)
  })
});

options具体配置参考：https://html2canvas.hertzen.com/configuration/

下面贴个完整代码：

<template>
  <div class="main">
    <div class="toolbar">
      <button @click="copy">复制</button>
      <button @click="download">保存/下载</button>
    </div>
    <div class="container">
      <div class="content">
        <h1>标题</h1>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
      </div>
      <div v-for="src in imgs" :key="src" class="imgs content">
        <img :src="src" alt="">
      </div>
    </div>
  </div>
</template>
<script setup>
/**
 * 官网 https://html2canvas.hertzen.com/
 * 使用示例 https://html2canvas.hertzen.com/getting-started
 * options配置 https://html2canvas.hertzen.com/configuration/
 */
import { onMounted, ref } from 'vue'
import html2canvas from 'html2canvas'

let imgs = ref([])
/**
 * 使用html2canvas将一个dom元素转为一个canvas
 * 然后可以调用canvas中的toDataURL转为base64编码
 * 也可以调用canvas中的toBlob 转为一个二进制对象
 */

// 复制
const copy = () => {
  const contentElement = document.querySelector('.content')
  html2canvas(contentElement).then(canvas => {
    // base64编码
    imgs.value.push(canvas.toDataURL())
  })
}

// 下载
const download = () => {
  // 设置height和windowwHeight属性，防止只下载当前看到的页面，这样就可以下载完整的内容
  const containerElement = document.querySelector('.container')
  html2canvas(containerElement, {
    allowTaint: true,
    useCORS: true,
    scale: 2,
    height: containerElement.scrollHeight,
    windowHeight: containerElement.scrollHeight
  }).then(canvas => {
    // blob
    canvas.toBlob(blob => {
      const href = window.URL.createObjectURL(new Blob([blob]))
      const link = document.createElement('a')
      link.href = href
      link.download = '测试图片.png'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }, 'image/png')
  })
}
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.toolbar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.toolbar button {
  padding: 5px 15px;
  margin-left: 5px;
}

.container {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.content {
  width: 500px;
  height: 300px;
  border: 1px solid red;
  margin-bottom: 5px;
}

.imgs img {
  width: 100%;
  height: 100%;
}

h1 {
  text-align: center;
}

p {
  text-align: center;
}
</style>

效果 ：