使用html2canvas将网页导出为图片

news2024/11/27 16:36:03

1. 安装html2canvas

npm install html2canvas

或者

pnpm install html2canvas

2. 简单使用案例

在这里插入图片描述

ref：Vue 3 的 ref 用来引用 DOM 元素。我们通过 exportContent 引用需要导出的 DOM 元素。
html2canvas：html2canvas 库会将指定的 DOM 元素渲染为画布（canvas），然后可以通过 canvas.toDataURL() 将画布转换为图片的 Base64 数据 URL。
link.click()：创建一个临时的 <a> 标签，并通过 click() 方法自动触发图片的下载。

<template>
  <div class="container-wrap">
    <div class="snapshot" @click="exportToImage">截图</div>
    <div class="export-content" ref="exportContent">
        <!-- 这里是你想要导出为图片的内容 -->
      <div class="box">
        <h1>DEMO</h1>
        <div class="box-content">
          The CSS snippet collection contains utilities and interactive examples
          for CSS3. It includes modern techniques for creating commonly-used
          layouts, styling and animating elements, as well as snippets for
          handling user interactions.
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import html2canvas from "html2canvas";

const exportContent = ref(null);
const exportToImage = async () => {
  if (exportContent.value) {
    try {
      // 使用 html2canvas 渲染指定的 DOM 元素
      // const canvas = await html2canvas(exportContent.value as HTMLElement);
      const canvas = await html2canvas(exportContent.value as HTMLElement, {
        // backgroundColor: null, // 保留背景透明度
        useCORS: true, // 启用跨域资源支持
      });

      // 将画布转换为图片数据 URL
      const imageData = canvas.toDataURL("image/png");

      // 创建一个下载链接
      const link = document.createElement("a");
      link.href = imageData;
      link.download = "exported-image.png";

      // 触发下载
      link.click();
    } catch (error) {
      console.error("导出图片失败:", error);
    }
  }
};
</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.export-content {
  background-image: linear-gradient(
    45deg,
    #cefffe 0%,
    #dfdcfc 48%,
    #f1d1d5 100%
  );
  width: 100%;
  height: 80vh;
  padding: 16px;
}
.box-content {
  width: 500px;
  height: 200px;
  border-radius: 10px;
  border: 1px solid #747272;
  border-right: 3px solid #b98a8a;
  border-top: 3px solid #b98a8a;
  border-left: 3px solid #9a88c5;
  border-bottom: 3px solid #9a88c5;
  padding: 16px;
  font-family: cursive;
  font-size: 18px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 12px;
}
.snapshot {
  height: 46px;
  line-height: 46px;
  font-size: 14px;
  cursor: pointer;
  margin: 0 auto;
  position: relative;
  left: 200px;
}
</style>

注意事项：

背景设置：如果在ref="exportContent" 所在元素外层设置背景色，导出的背景将会没有生效。
CSS 兼容性：html2canvas 对于 CSS 的支持有限，某些 CSS 属性可能无法正确渲染，例如复杂的动画、滤镜等效果。
html2canvas 中不支持的 CSS 属性：
background-blend-mode
border-image
box-decoration-break
box-shadow
filter
font-variant-ligatures
mix-blend-mode
object-fit
repeating-linear-gradient()
writing-mode
zoom
🔍html2canvas 所有支持的 CSS 属性和值的列表
🔍html2canvas配置项
跨域问题：确保页面上的图片和资源不会引发跨域问题，否则可能会导致图片渲染失败。