读取本地文件和读取远程的一样，都使用fetch去获取

 async function modifyPdf() {
    let url = './template.pdf'
    let existingPdfBytes = await fetch(url).then(res => res.arrayBuffer()) 
    // 这里也有问题要转一下
    const d = new Uint8Array(existingPdfBytes)
    const pdfDoc = await PDFDocument.load(d)
    const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
  
    const pages = pdfDoc.getPages()
    const firstPage = pages[0]
    const { width, height } = firstPage.getSize()
    firstPage.drawText('This text was added with JavaScript!', {
      x: 500,
      y: height / 2 + 300,
      size: 50,
      font: helveticaFont,
      color: rgb(0.95, 0.1, 0.1),
      // rotate: degrees(-45),
    })
    let data = await pdfDoc.save()
    renderPdf(data)
  }

这里有个坑：

1. 文件最好是直接放在public里面，因为这里fetch访问的是绝对路径

2. No PDF header found at MissingPDFHeaderError

需要讲fetch获取到的结果转一下

要将他渲染出来也有几种方法。

浏览器下使用iframe

function renderPdf(uint8array) {
    const tempblob = new Blob([uint8array], {
      type: 'application/pdf'
    });
    const docUrl = URL.createObjectURL(tempblob);
    setSrc(docUrl);
  }

移动端可以借助react-pdf。这个有缺陷，pdf页数较多需要一次渲染的时候会比较慢有白屏时间，暂时没做处理。有时间补后续。