如何在不使用包管理器的纯JavaScript中使用Hopding/pdf-lib？

1. 引入兼容脚本 #

通过HTML的<script>标签引入UMD格式的pdf-lib脚本，引入后全局作用域会暴露PDFLib对象：

<script src="https://unpkg.com/pdf-lib@latest/dist/pdf-lib.min.js"></script>

也可以从官方发布渠道下载该脚本文件，本地引入使用。

2. 编写PDF操作代码 #

以下是创建并下载简单PDF的示例，所有操作基于全局PDFLib对象：

async function createAndDownloadPDF() {
  // 创建空白PDF文档
  const pdfDoc = await PDFLib.PDFDocument.create();
  
  // 添加A4尺寸的页面
  const page = pdfDoc.addPage([595, 842]);
  
  // 嵌入内置标准字体
  const font = await pdfDoc.embedFont(PDFLib.StandardFonts.TimesRoman);
  
  // 在页面指定位置绘制文本
  page.drawText('纯JS环境下使用pdf-lib示例', {
    x: 50,
    y: 750,
    size: 20,
    font: font,
    color: PDFLib.rgb(0.2, 0.4, 0.6),
  });
  
  // 导出PDF字节数据
  const pdfBytes = await pdfDoc.save();
  
  // 触发浏览器下载
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'demo.pdf';
  a.click();
  URL.revokeObjectURL(url);
}

// 执行生成操作
createAndDownloadPDF();

关键注意事项 #

• pdf-lib的核心API均为异步方法，必须使用async/await或Promise链式调用处理
• 本地file://协议下运行可能触发CORS限制，建议用本地HTTP服务器（如python -m http.server）访问

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