Ionic 6 Angular中jsPDF.html()多次调用输出空白PDF问题

在Ionic 6 Angular应用中使用jsPDF v2.5.1生成PDF时，首次调用printPdf函数能正常生成对应页面内容的PDF，但后续每次调用都会输出空白PDF。尝试在构造函数中实例化jsPDF，结果后续生成的始终是首次的文档内容。期望每次调用都能生成当前活跃页面内容的PDF。

原代码如下：

async printPdf(elementId: string) {
    const htmlBody = document.getElementById(elementId);

    let orientationIsPortrait = await this._currentOrientationIsPortrait();

    let doc = new jsPDF({
      orientation: "landscape"
    });

    await doc
      .html(htmlBody, {
        callback: this._completePdfShare,
        x: 0,
        y: 0,
        width: 280,
        windowWidth: orientationIsPortrait
          ? htmlBody.clientWidth * 4
          : htmlBody.clientWidth * 2,
      })
      .catch((error) => console.log(error));
  }

private async _completePdfShare(doc: jsPDF) {
    const fileName = `${new Date().getTime()}.pdf`;

    let pdfDocument = doc.output('datauristring', { filename: fileName });

    console.log(pdfDocument);

    //Share Doc
  }

问题根源分析 #

1. DOM元素状态异常：jsPDF的html方法可能会修改原DOM元素的样式或结构，导致后续调用时元素内容被破坏。
2. Angular变更检测延迟：按钮点击后Angular的变更检测可能未完成，获取到的DOM是旧状态。
3. 回调上下文与实例复用问题：未确保每次调用都使用全新的jsPDF实例，且回调函数的上下文可能出现异常。

修改后的代码 #

async printPdf(elementId: string) {
  // 等待浏览器完成渲染，确保DOM为最新状态
  await new Promise(resolve => setTimeout(resolve, 0));

  const htmlBody = document.getElementById(elementId);
  if (!htmlBody) {
    console.error('无法找到目标DOM元素');
    return;
  }

  const orientationIsPortrait = await this._currentOrientationIsPortrait();

  // 每次调用都创建全新的jsPDF实例
  const doc = new jsPDF({
    orientation: "landscape"
  });

  await doc
    .html(htmlBody.cloneNode(true) as HTMLElement, { // 克隆DOM元素，避免原元素被修改
      callback: (doc) => this._completePdfShare(doc), // 用箭头函数绑定组件上下文
      x: 0,
      y: 0,
      width: 280,
      windowWidth: orientationIsPortrait
        ? htmlBody.clientWidth * 4
        : htmlBody.clientWidth * 2,
    })
    .catch((error) => console.error('PDF生成失败:', error));
}

private async _completePdfShare(doc: jsPDF) {
  const fileName = `${new Date().getTime()}.pdf`;
  const pdfDocument = doc.output('datauristring', { filename: fileName });
  console.log(pdfDocument);
  // 执行PDF分享逻辑
}

关键改动说明 #

• 等待DOM渲染完成：通过setTimeout让浏览器先完成Angular变更检测后的渲染，确保获取的DOM是当前页面的最新内容。
• 克隆DOM元素：使用cloneNode(true)复制目标元素，避免jsPDF处理时修改原DOM结构，导致后续调用异常。
• 确保实例唯一性：每次调用都创建新的jsPDF实例，彻底避免复用旧实例导致的内容重复问题。
• 上下文绑定：用箭头函数包裹回调，确保_completePdfShare中的this指向组件实例，避免上下文丢失。
• 元素存在性检查：增加元素是否存在的判断，提前拦截错误。

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