> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 开发工具使用指南

> 开发工具的使用技巧.

## 使用技巧

### html2canvas 元素对齐问题解决方案

使用 html2canvas 截图时,可能出现元素对齐偏差,与浏览器实际渲染不一致的问题.

**核心问题**:
html2canvas 截图时元素对齐偏差,与浏览器实际渲染不一致.

**解决方案:动态 CSS 注入**

通过注入临时修复样式 + 控制渲染参数,解决对齐偏差问题.

```javascript theme={null}
const exportElement = async () => {
  // 1. 注入修复样式
  const style = document.createElement('style');
  style.id = 'export-fix-style';
  document.head.appendChild(style);
  
  if (style.sheet) {
    style.sheet.insertRule('* { box-sizing: border-box !important; }', 0);
    style.sheet.insertRule('img { display: inline-block !important; }', 1);
    style.sheet.insertRule('div { box-sizing: border-box !important; line-height: 1.2 !important; }', 2);
    style.sheet.insertRule('span { line-height: 1.2 !important; }', 3);
  }
  
  try {
    // 2. 等待资源加载（图片+字体）
    await Promise.all([
      ...document.images.map(img => 
        img.complete ? Promise.resolve() : new Promise(resolve => {
          img.onload = img.onerror = resolve;
        })
      ),
      document.fonts.ready // 等待字体加载完成
    ]);
    
    // 3. 执行截图（关键配置见下文）
    const canvas = await html2canvas(element, {
      scale: 3, // 高清缩放
      foreignObjectRendering: false, // 禁用 foreignObject,使用传统渲染更稳定
      useCORS: true, // 允许跨域图片
      allowTaint: true // 允许污染画布（配合 useCORS 处理跨域）
    });
    
    return canvas.toDataURL('image/png', 1.0); // 返回 PNG 数据
  } finally {
    // 4. 清理临时样式（确保异常时也移除）
    document.getElementById('export-fix-style')?.remove();
  }
};
```

**关键配置说明**:

| 参数                       | 推荐值            | 作用说明                                                          |
| ------------------------ | -------------- | ------------------------------------------------------------- |
| `foreignObjectRendering` | `false`        | 禁用 `foreignObject` 渲染模式,改用传统 Canvas 绘制,避免因 SVG 渲染差异导致的对齐偏差    |
| `box-sizing`             | `border-box`   | 统一盒模型计算方式（含内边距/边框）,避免因默认 `content-box` 导致的尺寸计算偏差              |
| `line-height`            | `1.2`          | 固定行高,消除文字因行高动态变化导致的垂直对齐偏移                                     |
| `img { display }`        | `inline-block` | 避免 `img` 默认 `inline` 元素的 `vertical-align: baseline` 导致的基线对齐偏差 |

**注意事项**:

1. **配置一致性**:所有导出场景（如单次导出,批量导出）需使用相同配置,避免不同模式下渲染逻辑差异导致对齐问题.

2. **等待充分**:切换页面状态（如动态加载内容,修改样式）后,需等待至少 `1000ms` 再执行截图,确保 DOM 和样式完全稳定.

3. **清理及时**:通过 `try...finally` 确保临时注入的修复样式（`export-fix-style`）在截图后必被移除,避免污染页面正常样式.

4. **测试全面**:需覆盖「单次导出」「批量导出」「复杂布局（含图片/文字/嵌套元素）」等场景,验证对齐效果一致性.