javascript - 使用 PDF-LIB 在 React 中渲染 PDF

Question

我正在尝试使用 PDF-LIB为了在我的 React 应用程序中实现 PDF 功能。目的是呈现表单的 PDF 版本，并允许用户编辑字段，然后保存他们的进度。
出于这个原因，我决定使用 PDF-LIB 而不是 react-pdf 之类的替代方案，因为这似乎是最强大的。
我对使用 PDF 的过程的理解如下:Fetch PDF & convert to byte array --> Load PDF data and make changes --> Save updated PDF as byte array我正在尝试修改找到的示例 here
这是我的代码:

const LoadPDF = () => {
  const [pdfInfo, setPdfInfo] = useState([]);

  useEffect(() => {
    modifyPdf();
  }, []);

  const modifyPdf = async () => {
    const existingPdfBytes = await fetch(
      "https://pdf-lib.js.org/assets/with_update_sections.pdf"
    ).then((res) => res.arrayBuffer());

    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);

    const pages = pdfDoc.getPages();
    const firstPage = pages[0];
    
    // Get the width and height of the first page
    const { width, height } = firstPage.getSize();
    firstPage.drawText("This text was added with JavaScript!", {
      x: 5,
      y: height / 2 + 300,
      size: 50,
      font: helveticaFont,
      color: rgb(0.95, 0.1, 0.1),
      rotate: degrees(-45),
    });

    const pdfBytes = await pdfDoc.save();
    const docUrl = URL.createObjectURL(
      new Blob(pdfBytes, { type: "application/pdf" })
    );
    setPdfInfo(docUrl);
  };
  
  return (
    <>{<iframe title="test-frame" src={pdfInfo} type="application/pdf" />}</>
  );
};

export default LoadPDF;

文档表明我应该能够在 iframe 中呈现 PDF。我尝试创建一个 iframe 元素并将其从 modifypdf 中返回。功能。我还尝试将修改后的 PDF 数据设置为 pdfInfo处于状态。我尝试的第三件事是创建一个图像然后渲染它。
在这一点上，我迷路了。考虑到我希望用户能够编辑文档并能够保存，在 iFrame 中呈现 PDF 对我来说是最佳选择吗？我在以我需要的格式获取数据和将其呈现到屏幕之间存在脱节。我知道我需要重构它，但我试图了解这个库是如何工作的，然后着手解决我的问题的其他部分。
20 年 9 月 29 日更新:
我意识到我有一个字节数组，其中包含 const pdfBytes = await pdfDoc.save(); 导致的 PDF 修订。所以我用了URL.createObjectURL将数据转换为可以在渲染 iframe 时在源中使用的 URL。该部分不再中断，但 PDF 仍然不会在 iframe 中呈现。
我已经包含了上面编辑过的代码。

Answer 1

添加这些行似乎可以为我修复代码:

    
const bytes  = new Uint8Array( pdfBytes ); 
const blob   = new Blob( [ bytes ], { type: "application/pdf" } );
const docUrl = URL.createObjectURL( blob );
setPdfInfo( docUrl );

或者直接使用:

return <iframe src={docUrl} type="application/pdf" />