如何不使用fetch/node加载本地PDF通过pdf-lib在客户端编辑

所有方案最终输出的都是和fetch返回格式完全一致的ArrayBuffer类型PDF字节流，可以直接传入pdf-lib的加载方法，不需要修改后续PDF编辑逻辑。

方案1：用户自主选择本地PDF文件（最常用） #

通过原生文件选择控件获取用户本地的PDF文件，直接调用浏览器原生API读取字节流，全程无网络请求、不依赖Node环境。

• 页面中加入PDF文件选择控件：

<input type="file" id="localPdfSelector" accept=".pdf" />

• 监听选择事件读取文件内容：

const selector = document.getElementById('localPdfSelector')
selector.addEventListener('change', async (e) => {
  const pdfFile = e.target.files[0]
  if (!pdfFile) return
  // 直接读取为ArrayBuffer，和原有fetch返回结果完全等价
  const formPdfBytes = await pdfFile.arrayBuffer()
  // 后续直接调用pdf-lib加载即可，示例：
  // const pdfDoc = await PDFDocument.load(formPdfBytes)
})

*如果需要兼容极老旧不支持File.arrayBuffer()的浏览器，可以替换为FileReader.readAsArrayBuffer()实现，逻辑一致。

方案2：内嵌固定PDF模板（适用于预设模板场景） #

如果待加载的是固定不变的PDF模板（比如表单模板、合同模板），不需要用户选择，也不想发起fetch请求，可以提前把PDF文件转为base64字符串内嵌到代码中，运行时直接转成ArrayBuffer使用。

// 提前转换好的PDF base64字符串，替换为你自己的文件内容即可
const pdfTemplateBase64 = '此处替换为你的PDF转base64后的长字符串'

// base64转ArrayBuffer工具函数
function base64ToBuffer(base64) {
  const binary = atob(base64)
  const byteArr = new Uint8Array(binary.length)
  for (let i = 0; i < binary.length; i++) {
    byteArr[i] = binary.charCodeAt(i)
  }
  return byteArr.buffer
}

// 直接获取可用的PDF字节流，无任何网络请求
const formPdfBytes = base64ToBuffer(pdfTemplateBase64)
// 后续直接传入pdf-lib加载即可

提示：不要把大体积PDF转base64内嵌，会明显增加前端代码包体积，超过2M的PDF优先用方案1的用户选择方式加载。

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