跳轉到主要內容

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 注入 通過注入临時修復樣式 + 控制渲染參數,解決對齊偏差問題. 
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();
  }
};
關鍵配置說明:
參數推薦值作用說明
foreignObjectRenderingfalse禁用 foreignObject 渲染模式,改用傳統 Canvas 繪製,避免因 SVG 渲染差異導致的對齊偏差
box-sizingborder-box統一盒模型計算方式（含內邊距/邊框）,避免因默認 content-box 導致的尺寸計算偏差
line-height1.2固定行高,消除文字因行高動态變化導致的垂直對齊偏移
img { display }inline-block避免 img 默認 inline 元素的 vertical-align: baseline 導致的基線對齊偏差
注意事項:
  1. 配置一致性:所有導出場景（如單次導出,批量導出）需使用相同配置,避免不同模式下渲染逻輯差異導致對齊問題.
  2. 等待充分:切換頁面狀態（如動态載入內容,修改樣式）後,需等待至少 1000ms 再執行截圖,確保 DOM 和樣式完全穩定.
  3. 清理及時:通過 try...finally 確保临時注入的修復樣式（export-fix-style）在截圖後必被移除,避免污染頁面正常樣式.
  4. 測試全面:需覆蓋「單次導出」「批量導出」「複雜佈局（含圖片/文字/嵌套元素）」等場景,驗證對齊效果一致性.