使用html2canvas截取Vue应用截图出现文本异常边距问题

问题信息 #

• 依赖版本：

  "vue": "^3.4.21",
  "html2canvas": "^1.4.1"
  

• 截图代码：

  html2canvas(document.body, {
    width: 400,
    height: 200,
  }).then((canvas) => {
    document.body.appendChild(canvas);
  });
  

• 现象：应用内文本排版正常，但截图后文本出现异常的内边距/外边距，Brave、Safari、Chrome浏览器均存在此问题。

解决方法 #

1. 调整html2canvas渲染参数 #

html2canvas对部分字体的渲染计算存在偏差，添加以下参数尝试修复：

• 启用逐字符渲染+适配高DPI屏幕：

  html2canvas(document.body, {
    width: 400,
    height: 200,
    letterRendering: true, // 强制逐字符渲染，修正字体间距异常
    scale: window.devicePixelRatio // 适配屏幕像素比，避免排版偏移和模糊
  }).then((canvas) => {
    document.body.appendChild(canvas);
  });
  

• 若无效，尝试关闭浏览器CSS依赖，使用html2canvas自身样式计算：

  html2canvas(document.body, {
    width: 400,
    height: 200,
    useCSS: false
  })
  

2. 等待字体完全加载后再截图 #

如果应用使用了自定义字体，未加载完成就截图会导致html2canvas回退到系统字体，引发排版异常。监听字体加载完成事件后执行截图：

// 替换为你的自定义字体名称
document.fonts.load('1em YourCustomFont').then(() => {
  html2canvas(document.body, {
    width: 400,
    height: 200
  }).then((canvas) => {
    document.body.appendChild(canvas);
  });
});

3. 调整文本元素CSS样式 #

给异常文本元素添加以下样式，强制规范排版：

.text-target {
  display: inline-block;
  line-height: 1.2; /* 根据实际需求调整 */
  margin: 0;
  padding: 0;
}

4. 升级html2canvas版本 #

html2canvas 1.x存在部分字体渲染已知bug，升级到最新稳定版（如2.x）可能直接修复问题：

npm install html2canvas@latest

内容的提问来源于stack exchange，提问作者Balzac