使用html2pdf.js转PDF为Blob遇类型错误，如何转为ArrayBuffer？

你遇到的TypeError: Failed to construct 'Blob': The provided value cannot be converted to a sequence错误，核心问题有两个：

• 处理页码的then回调没有返回pdf实例，导致后续output(Blob)调用的是undefined，最终传给Blob构造函数的是无效值
• 多此一举手动调用new Blob()，而html2pdf的output(Blob)本身就会返回Blob对象

修复方案 #

• 修复链式调用的返回值：在添加页码的then里必须return pdf，保证后续链式调用能拿到正确的jsPDF实例
• 直接使用output返回的Blob：去掉多余的new Blob()包裹，直接接收output(Blob)的结果
• 简化async/await逻辑：避免不必要的Promise嵌套，让代码更清晰

修改后的完整代码 #

async postArrayBufferByServerRelativeUrl(content, serverRelativeUrl, fileName) {
  const url = `${this.webUrl}/_api/web/getFolderByServerRelativeUrl('${serverRelativeUrl}')/files/add(url='${fileName}',overwrite=true)`;
  const fetchedDigest = await this.getFormDigest();
  const formDigestValue = fetchedDigest.d.GetContextWebInformation.FormDigestValue;

  const opt = {
    margin: 1,
    filename: fileName,
    image: { type: "jpeg", quality: 0.98 },
    html2canvas: {
      scale: 2,
      logging: true,
      dpi: 192,
      letterRendering: true,
    },
    jsPDF: {
      unit: "in",
      format: "a4",
      orientation: "portrait",
      putOnlyUsedFonts: true,
      floatPrecision: 16,
    },
  };

  // 修正链式调用，确保每个环节返回正确值
  const pdfBlob = await html2pdf()
    .from(content)
    .set(opt)
    .toCanvas()
    .toPdf()
    .get("pdf")
    .then((pdf) => {
      const totalPages = pdf.internal.getNumberOfPages();
      for (let i = 1; i <= totalPages; i++) {
        pdf.setPage(i);
        pdf.setFontSize(10);
        pdf.setTextColor(200);
        pdf.text(
          `Page ${i} of ${totalPages}`,
          pdf.internal.pageSize.getWidth() / 2.3,
          pdf.internal.pageSize.getHeight() - 2
        );
      }
      // 必须返回pdf，否则后续output调用会失败
      return pdf;
    })
    .output("blob"); // 用字符串"blob"作为参数，适配多数html2pdf版本

  // 转换为ArrayBuffer并上传
  const arrayBuffer = await new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = () => resolve(fileReader.result);
    fileReader.onerror = () => reject(fileReader.error);
    fileReader.readAsArrayBuffer(pdfBlob);
  });

  try {
    const data = await $.ajax({
      url,
      type: "POST",
      data: arrayBuffer,
      processData: false,
      headers: {
        Accept: "application/json; odata=verbose",
        "content-type": "application/json; odata=verbose",
        "X-RequestDigest": formDigestValue,
      },
    });
    return data;
  } catch (error) {
    throw new Error(error.message);
  }
}

关键修改点说明 #

1. 返回pdf实例：在添加页码的then回调末尾加上return pdf，确保后续的output方法能调用到有效的jsPDF对象
2. 正确调用output：把.output(Blob)改成.output("blob")，因为html2pdf的output方法接受字符串类型的输出格式参数（兼容性更好）
3. 简化FileReader逻辑：将FileReader的回调包装成Promise，配合async/await避免回调嵌套
4. 移除多余的new Blob()：直接使用output返回的Blob对象，不需要再手动构造

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