Javascript 使用PDF-LIB在React中呈现PDF

我试图使用，以便在我的React应用程序中实现PDF功能。其目的是呈现表单的PDF版本，并允许用户编辑字段，然后保存其进度

出于这个原因，我决定使用PDF-LIB而不是像react PDF这样的替代方案，因为这似乎是最健壮的

我对使用PDF的过程的理解如下：

获取PDF并转换为字节数组

-->

加载PDF数据并进行更改

-->

将更新后的PDF另存为字节数组

我正在尝试改编这个例子

这是我的密码：

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;

const LoadPDF=（）=>{
const[pdfInfo，setPdfInfo]=useState（[]）；
useffect（（）=>{
修改PDF（）；
}, []);
const modifyPdf=async（）=>{
const existingPdfBytes=等待获取(
"https://pdf-lib.js.org/assets/with_update_sections.pdf"
)。然后（（res）=>res.arrayBuffer（））；
const pdfDoc=等待PDFDocument.load（现有pdfBytes）；
const helveticaFont=wait pdfDoc.embedFont（StandardFonts.Helvetica）；
const pages=pdfDoc.getPages（）；
const firstPage=pages[0]；
//获取第一页的宽度和高度
const{width，height}=firstPage.getSize（）；
drawText（“此文本是用JavaScript添加的！”{
x:5，
y：高度/2+300，
尺码：50，
字体：helveticaFont，
颜色：rgb（0.95,0.1,0.1），
旋转：度（-45），
});
const pdfBytes=等待pdfDoc.save（）；
const docUrl=URL.createObjectURL(
新Blob（pdfBytes，{type:“application/pdf”}）
);
setPdfInfo（docUrl）；
};
返回(
{}
);
};
导出默认加载PDF；

文档表明我应该能够在iframe中呈现PDF。我尝试创建一个iframe元素，并从

modifypdf

函数中返回该元素。我还尝试将修改后的PDF数据设置为处于状态的

pdfInfo

。我尝试的第三件事是创建一个图像，然后渲染它

在这一点上，我迷路了。如果我希望用户能够编辑文档并保存，那么在iFrame中呈现PDF是否是我的最佳选择？在以我需要的格式获取数据和将其呈现到屏幕之间，我有一个断开的连接。我知道我需要重构这个库，但我正试图了解这个库是如何工作的，然后解决问题的其他部分

更新日期9/29/20：

我意识到我有一个带有PDF修订版的字节数组，这是

constpdfbytes=await pdfDoc.save（）的结果

所以我使用了

URL.createObjectURL

将数据转换成一个URL，在渲染iframe时可以在源代码中使用。该部分不再中断，但PDF仍不会在iframe中呈现

---

我已经包含了上面编辑的代码。

我所做的和工作：我添加了对iframe实例的引用：

import React, { useState, useEffect, useRef } from 'react';

const LoadPDF = () => {
...
const viewer = useRef(null);

const modifyPDF = async () => {
...
};

return (
        <>{<iframe title="test-frame" src={pdfInfo} ref={viewer} type="application/pdf" />}</>
      );
}

import React，{useState，useffect，useRef}来自'React'；
常量加载PDF=（）=>{
...
const viewer=useRef（null）；
const modifyPDF=async（）=>{
...
};
返回(
{}
);
}

添加这些行似乎可以修复我的代码：

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

---

这是很久以前的事了-你解决了吗？我并不真正理解使用iframe的必要性，除非您将整个文档加载到iframe中，而不使用其他标记。有一个pdf查看器，你可以用它来显示带有缩放/下一页等控件的pdf。etcI从未解决过这个问题。我的部分问题是我以前从未以任何方式处理过PDF文档。我不知道如何使用浏览器PDF查看器。我也不确定浏览器查看器是否允许我让用户编辑PDF中的字段，并让我的应用程序将这些更改保存到状态。