使用jsPDF生成PDF时加载遮罩无法正常触发的问题排查

我猜你遇到的核心问题是jsPDF的PDF生成过程是同步阻塞式的——哪怕你先调用了遮罩函数，紧接着的同步PDF生成代码会立刻抢占浏览器的UI线程，导致遮罩的样式更新根本来不及渲染出来。下面给你几个针对性的解决方案，结合你提到的遮罩逻辑（修改背景透明度+显示隐藏div）来调整：

1. 用setTimeout把PDF生成逻辑延后执行 #

这是最直接的修复方式，让浏览器先完成遮罩的渲染，再启动PDF生成：

// 显示加载遮罩的函数
function showLoader() {
  document.body.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
  document.getElementById("loader-div").style.display = "block";
}

// 隐藏加载遮罩的函数
function hideLoader() {
  document.body.style.backgroundColor = "";
  document.getElementById("loader-div").style.display = "none";
}

function exportToPDF() {
  // 第一步：先显示遮罩
  showLoader();
  
  // 用setTimeout把PDF生成放到下一个宏任务队列，给浏览器留足渲染时间
  setTimeout(() => {
    try {
      // 这里是你的PDF生成逻辑
      const doc = new jsPDF();
      doc.text("你的PDF内容", 10, 10);
      // 其他PDF操作：添加图片、表格等
      doc.save("导出文件.pdf");
    } finally {
      // 无论成功失败，都要隐藏遮罩
      hideLoader();
    }
  }, 0);
}

2. 结合async/await处理异步场景 #

如果你的PDF生成依赖异步操作（比如加载远程图片、请求后端数据），可以把导出函数改成异步函数，确保遮罩先显示：

async function exportToPDF() {
  showLoader();
  
  try {
    // 模拟异步操作：比如加载图片数据
    const imageBlob = await fetch("/path/to/image.png").then(res => res.blob());
    const imageData = await new Promise(resolve => {
      const reader = new FileReader();
      reader.onload = e => resolve(e.target.result);
      reader.readAsDataURL(imageBlob);
    });

    // 生成PDF
    const doc = new jsPDF();
    doc.addImage(imageData, "PNG", 10, 10);
    doc.save("带图片的PDF.pdf");
  } catch (err) {
    console.error("PDF生成出错：", err);
    // 这里可以加错误提示
  } finally {
    hideLoader();
  }
}

3. 修正回调函数的使用方式 #

如果你之前尝试用回调但没生效，大概率是因为回调被同步执行了。正确的做法是确保遮罩渲染完成后再触发回调：

// 封装带遮罩的回调执行函数
function runWithLoader(callback) {
  showLoader();
  // 用requestAnimationFrame确保UI渲染完成后再执行回调
  requestAnimationFrame(() => {
    try {
      callback();
    } finally {
      hideLoader();
    }
  });
}

// 调用示例
runWithLoader(() => {
  const doc = new jsPDF();
  doc.text("用回调实现的PDF导出", 10, 10);
  doc.save("回调测试.pdf");
});

关键注意点： #

• 同步代码会完全阻塞浏览器UI，所以任何需要即时显示的UI更新（比如遮罩），必须在同步的PDF生成代码之前，并且给浏览器留出渲染时间。
• 一定要用finally块来隐藏遮罩，避免PDF生成失败时遮罩一直停留在页面上。

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