如何为JavaScript的PDF-Lib生成的PDF设置默认文件名

你遇到的核心问题是：用PDF-Lib生成的PDF嵌入iframe后，浏览器自带的下载按钮没法用自定义文档编号作为默认文件名。这是因为PDF的元数据（比如setTitle设置的内容）和浏览器下载时的默认文件名逻辑是分离的，PDF-Lib本身无法直接控制浏览器的下载文件名规则。

解决方案 #

我们可以通过添加自定义下载按钮，手动处理PDF的下载流程，从而指定任意默认文件名。具体逻辑：

• 生成PDF时同时保存为Blob对象
• 创建隐藏的a标签，将Blob转为Object URL，给a标签设置download属性指定文件名
• 点击按钮时触发a标签的点击事件完成下载
• 同时将Blob转为data URI，继续在iframe中展示PDF

修改后的完整代码 #

<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
</head>

<body>
  <div style="display: flex; width: 100%; height: 100vh; flex-direction: column; overflow: hidden;">
    <!-- 添加自定义下载按钮 -->
    <button id="downloadBtn" style="padding: 8px 16px; margin-bottom: 8px;">下载PDF</button>
    <iframe id="pdf" title="myTest PDF" style="flex-grow: 1; border: none; margin: 0; padding: 0;"></iframe>
  </div>
</body>
<script>
  // 替换为你的实际文档编号，支持动态生成
  const documentNumber = "DOC-2024-001";
  let pdfBlob;

  createPdf();
  async function createPdf() {
    const pdfDoc = await PDFLib.PDFDocument.create();
    pdfDoc.setSubject('PDF Subject');
    pdfDoc.setTitle('PDF Title');
    const page = pdfDoc.addPage([350, 400]);
    page.moveTo(110, 200);
    page.drawText('Hello World!');

    // 保存PDF为Blob对象
    pdfBlob = await pdfDoc.save();
    // 转为data URI给iframe展示
    const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
    document.getElementById('pdf').src = pdfDataUri;
  }

  // 绑定下载按钮点击事件
  document.getElementById('downloadBtn').addEventListener('click', () => {
    if (!pdfBlob) return;
    // 创建Blob的临时URL
    const url = URL.createObjectURL(pdfBlob);
    // 创建临时a标签触发下载
    const a = document.createElement('a');
    a.href = url;
    // 设置下载文件名
    a.download = `${documentNumber}.pdf`;
    a.click();
    // 释放临时URL资源
    URL.revokeObjectURL(url);
  });
</script>
</html>

补充说明 #

• 只需把documentNumber替换为实际业务中的文档编号即可，支持前端动态生成或从后端获取
• 该方案保留了iframe展示PDF的功能，同时通过自定义按钮实现了指定文件名下载
• 浏览器自带的iframe下载按钮仍会使用默认文件名，若想隐藏浏览器PDF工具栏需要修改PDF权限（操作复杂），引导用户使用自定义下载按钮是更简便的方案

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