Chrome中使用html2canvas生成截图报out of memory错误，求解决方案

问题分析 #

你的代码里几个核心点会触发内存溢出：

• 一次性生成所有目标DOM的canvas（Promise.all(tasks)），大量高分辨率canvas同时占用内存
• scale:2让canvas像素量翻倍，内存占用呈平方级增长
• PDF生成逻辑中重复添加图片，导致不必要的内存消耗和超大文件体积

修复方案与内存优化 #

1. 降低截图分辨率

把html2canvas的scale参数从2下调到1或1.5，直接减少canvas的像素总量，大幅降低内存占用：

html2canvas(tab, {scale:1, removeContainer: true})

2. 分批处理DOM节点，避免一次性加载所有canvas

不要用Promise.all同时处理所有.print元素，改成逐个异步处理，处理完一个就释放对应资源，再处理下一个：

window.jsPDF = window.jspdf.jsPDF;
let printArea = [...document.querySelectorAll('.print:not([style*="display: none;"])')];
const doc = new jsPDF('l', 'mm', "a4");
let boolAdd = false;

async function processTabs() {
  for (const tab of printArea) {
    if (boolAdd) doc.addPage();
    
    // 生成单个canvas
    const canvas = await html2canvas(tab, {scale:1, removeContainer: true});
    const imgData = canvas.toDataURL('image/jpeg', 0.6);
    const pageHeight = doc.internal.pageSize.getHeight();
    const imgWidth = doc.internal.pageSize.getWidth();
    const imgHeight = canvas.height * imgWidth / canvas.width;
    
    let heightLeft = imgHeight - 20;
    let position = 10;
    // 添加首屏图片
    doc.addImage(imgData, 'JPEG', 20, position, imgWidth - 40, imgHeight);
    heightLeft -= pageHeight;
    
    // 仅当剩余内容超过一页时，才添加分页图片
    if (heightLeft > 0) {
      position = heightLeft - imgHeight;
      doc.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, undefined,'FAST');
    }
    
    boolAdd = true;
    // 立即释放当前canvas的内存
    canvas.remove();
    URL.revokeObjectURL(imgData);
  }
  doc.save('report.pdf');
}

processTabs();

3. 优化PDF分页逻辑

原代码中无论剩余内容是否超过一页，都会执行第二次addImage，这会导致重复添加图片，既浪费内存又让PDF体积暴涨。添加heightLeft > 0的判断，只在需要时分页。

4. 主动释放内存资源

• 处理完每个canvas后，调用canvas.remove()将其从DOM中移除，再设置canvas = null帮助垃圾回收（GC）
• 用URL.revokeObjectURL(imgData)释放toDataURL生成的临时资源
• 避免在变量中保留已处理完的canvas或图片数据

替代库推荐 #

如果上述优化仍无法解决内存问题，可以尝试以下工具：

• dom-to-image：轻量级DOM转图片库，内存占用比html2canvas低，支持生成PNG/JPEG/SVG，API使用方式类似
• html-to-pdfmake：直接将HTML转换为pdfmake支持的格式，无需先转canvas，生成的PDF体积更小，内存消耗更低
• Puppeteer：适合后端或Electron环境，通过Headless Chrome直接截图/生成PDF，内存管理更高效，支持大页面和批量处理

内容的提问来源于stack exchange，提问作者A.Serobabov