react-lib 读取本地模板创建PDF

风吹云灭

已于 2024-04-26 09:28:04 修改

阅读量472

点赞数 3

文章标签： react-lib react-pdf 本地pdf预览读取 PDF 前端创建pdf文件

于 2024-04-26 09:13:00 首次发布

本文链接：https://blog.csdn.net/m0_37452696/article/details/138205334

版权

本文讲述了如何使用JavaScript的fetchAPI从本地或远程获取PDF文件，处理可能的问题如PDF头缺失，以及在浏览器和移动端渲染PDF的不同方法，特别提到react-pdf在处理大量页面时的性能问题。

摘要由CSDN通过智能技术生成

读取本地文件和读取远程的一样，都使用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页数较多需要一次渲染的时候会比较慢有白屏时间，暂时没做处理。有时间补后续。