随缘

Appearance

实现页面截图并下载 ​

简介 ​

这里记录一下页面截图并下载的实现方法，简单搭建一个 demo 项目（项目地址）

具体的实现步骤如下：

  • 通过 html2canvas 生成 canvas
  • 通过 canvas.toDataURL() 生成 base64 数据
  • 通过 a 标签下载 base64 数据（到这里就是图片了）

具体的代码 ​

下面代码是对实现页面截图并下载封装的函数，只需要调用即可

js
import html2canvas from "html2canvas";
export async function downloadImage(
  id,
  options = {},
  downloadName = "image.png"
) {
  const element = document.getElementById(id);
  // 默认配置
  const { useCORS = true, scale = window.devicePixelRatio * 2 } = options;
  const canvas = await html2canvas(element, {
    useCORS,
    scale,
  });
  const dataUrl = canvas.toDataURL();
  downloadFile(downloadName, dataUrl);
}

function downloadFile(name, code) {
  const aLink = document.createElement("a");
  aLink.download = name;
  aLink.href = code;
  aLink.click();
}

项目中调用 ​

vue
<template>
  <div class="hello">
    <div class="operation-btn">
      <button @click="handleDownLoad">下载图片</button>
    </div>
    <div class="content">
      <ImageDom id="imageDom" />
    </div>
  </div>
</template>

<script>
import { downloadImage } from "@/utils/index.js";
import ImageDom from "./ImageDom.vue";
export default {
  name: "HelloWorld",
  components: { ImageDom },
  methods: {
    handleDownLoad() {
      this.$nextTick(async () => {
        downloadImage("imageDom", {}, "download.png");
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.operation-btn {
  margin: 16px;
  text-align: left;
}
.content {
  width: 100%;
  height: 400px;
  overflow: auto;
  margin: auto;
  display: flex;
  justify-content: center;
}
</style>

使用 html2canvas 可能会遇到的问题 ​

图片跨域问题 ​

由于 html2canvas 受浏览器同源策略的限制, 所以如果要截图的页面中存在跨域的图片, 需要设置 useCORS 为 true

图片清晰度问题 ​

通过配置项将 scale 属性对应的值调整大一点即可，我项目中设置的是 window.devicePixelRatio * 2, 在 html2canvas 中 scale 默认值为浏览器设备像素比。

浏览器设备像素比 可以通 window.devicePixelRatio 获取

对 canvas 进行等比放大，可以使 canvas 生成的图片更清晰，同时导出的文件大小也会同步增加。

图片样式缺失 ​

此问题的原因在于 html2canvas 有一些 css 样式是不支持的，导致截取出来的图片有部分样式缺失。因此写页面的时候只要自己注意一下就好了。

官方文档上面也有说明支持哪些 css 属性，不支持哪些 css 属性。具体详情可以点击传送门。

下面这些 css 属性是当前不支持的：

长图截取不全 ​

  • 解决方案： 给要截图的元素设置 height：fit-content注意：fit-content 有兼容性问题，使用的时候需要注意该属性是否符合你的目标浏览器的兼容性。

    给截图元素不设置高度或者设置 height: auto 发现都不起作用，后来尝试使用 fit-content 这个相对较新的属性后，可以完美解决高度问题。

  • 扩展知识 height: fit-content 用于根据元素内容的大小来自动调整元素的高度。它允许你根据内容动态地设置元素的高度，而不是使用固定的像素值或百分比。（这段话来自 chatGPT）

    另外 fit-content 可以和 min-height 和 max-height 搭配使用。

    • 与 min-height 搭配使用：当内容实际高度小于指定的最小高度时，元素的高度为 min-height 指定的高度，否则为元素的实际高度。。
    • 与 max-height 搭配使用：当内容高度大于指定的最大高度时，元素的高度为 max-height 指定的高度，否则为元素的实际高度。

总结 ​

实现页面截图并下载比较简单，只是需要注意一下 html2canvas 的一些小坑

参考文章 ​

https://juejin.cn/post/7336921343207145512#heading-6


⭐️⭐️⭐️ 好啦！！！本文章到这里就结束啦。⭐️⭐️⭐️

✿✿ ヽ(°▽°)ノ ✿

撒花 🌸🌸🌸🌸🌸🌸

上次更新于: