React Js中如何修改Blob生成PDF的文件名（导航栏标题）

原代码通过Blob生成PDF并在新标签页打开时，浏览器标签会显示Blob自动生成的随机URL字符串，且保存文件时默认使用该字符串作为文件名。以下是两种解决思路和修改后的代码：

方法一：通过File对象指定文件名+修改标签标题 #

这种方法简洁直接，既能让保存文件时默认使用自定义名称，又能修改新标签页的显示标题：

downloadDocument = (fileContent, customFileName = "自定义文档.pdf") => {
  const pdfContent = this.base64ToArrayBuffer(fileContent);
  // 将Blob转为File对象，传入自定义文件名
  const pdfFile = new File([pdfContent], customFileName, { type: DOWNLOAD_PDF.PDF_TYPE });
  
  const url = window.URL.createObjectURL(pdfFile);
  const newWindow = window.open(url);
  
  // 新窗口加载完成后，修改标签标题为自定义文件名
  if (newWindow) {
    newWindow.onload = () => {
      newWindow.document.title = customFileName;
    };
  }
  
  // 延迟释放URL，避免PDF未加载完成就被回收
  setTimeout(() => {
    window.URL.revokeObjectURL(url);
  }, 10000);
};

base64ToArrayBuffer = (base64) => {
  const binaryString = window.atob(base64);
  const binaryLen = binaryString.length;
  const bytes = new Uint8Array(binaryLen);

  for (let i = 0; i < binaryLen; i += 1) {
    const ascii = binaryString.charCodeAt(i);
    bytes[i] = ascii;
  }

  return bytes;
};

关键说明： #

• File对象替代Blob：File继承自Blob，通过new File()可以直接指定文件名，用户保存PDF时浏览器会默认使用这个名称。
• 修改标签标题：利用onload事件在PDF加载完成后更新新窗口的document.title，让标签栏显示自定义名称而非随机URL。
• 释放URL资源：使用revokeObjectURL释放创建的Blob URL，避免内存泄漏，延迟10秒是为了确保PDF已完全加载。

方法二：生成自定义HTML页面嵌入PDF #

如果需要更灵活的展示效果（比如自定义页面样式），可以在新窗口中创建一个包含PDF的HTML页面，同时设置标题和保存文件名：

downloadDocument = (fileContent, customFileName = "自定义文档.pdf") => {
  const pdfContent = this.base64ToArrayBuffer(fileContent);
  const pdfBlob = new Blob([pdfContent], { type: DOWNLOAD_PDF.PDF_TYPE });
  const url = window.URL.createObjectURL(pdfBlob);
  
  const newWindow = window.open();
  if (newWindow) {
    // 写入自定义HTML，嵌入PDF并设置标题
    newWindow.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>${customFileName}</title>
          <style>body { margin: 0; padding: 0; }</style>
        </head>
        <body>
          <embed 
            src="${url}" 
            type="${DOWNLOAD_PDF.PDF_TYPE}" 
            width="100%" 
            height="100%"
            download="${customFileName}"
          >
        </body>
      </html>
    `);
    newWindow.document.close();
    
    // 延迟释放URL资源
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
    }, 10000);
  }
};

base64ToArrayBuffer = (base64) => {
  const binaryString = window.atob(base64);
  const binaryLen = binaryString.length;
  const bytes = new Uint8Array(binaryLen);

  for (let i = 0; i < binaryLen; i += 1) {
    const ascii = binaryString.charCodeAt(i);
    bytes[i] = ascii;
  }

  return bytes;
};

关键说明： #

• 自定义HTML页面：通过document.write在新窗口中生成包含PDF嵌入的页面，直接设置页面标题为自定义文件名。
• embed标签的download属性：提示浏览器保存时使用指定的自定义文件名，部分浏览器需要用户主动触发保存操作。

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