Chrome下iframe加载base64编码PDF时自定义头部标题的解决方法咨询

你当前使用的iframe加载代码如下：

<iframe width="100%" height="100%" src="data:application/pdf;base64,${data}" type="application/pdf" />

Chrome加载该类data URI格式的PDF资源时，会默认将base64编码内容截断作为iframe头部标题显示，可采用以下方案解决：

• 方案1：包装HTML自定义标题（兼容性最好，推荐）
  构造包含自定义title标签的HTML页面，在页面内部加载PDF资源，再将HTML转为Blob URL赋值给iframe即可，示例代码：

// 替换为你要设置的标题
const pdfTitle = "自定义PDF标题";
// 构造带自定义标题的HTML内容
const html = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>${pdfTitle}</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    embed {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <embed src="data:application/pdf;base64,${data}" type="application/pdf">
</body>
</html>
`;
// 生成Blob URL
const htmlBlob = new Blob([html], { type: 'text/html' });
const htmlUrl = URL.createObjectURL(htmlBlob);
// 赋值给iframe
const pdfIframe = document.querySelector('iframe');
pdfIframe.src = htmlUrl;
// 页面销毁时释放Blob URL，避免内存泄漏
// pdfIframe.addEventListener('load', () => {
//   URL.revokeObjectURL(htmlUrl);
// })

• 方案2：使用PDF.js自定义渲染
  如果需要全量控制PDF的展示样式、操作逻辑，可直接引入开源的PDF.js库渲染PDF，完全自定义标题栏等UI元素，不受浏览器自带PDF阅读器的规则限制。
• 方案3：低版本Chrome兼容方案
  如果业务仅需要兼容Chrome 80以下版本，可以直接在data URI的媒体类型后添加;name=你的标题.pdf参数，无需额外代码，示例：

<iframe width="100%" height="100%" src="data:application/pdf;name=自定义标题.pdf;base64,${data}" type="application/pdf" />

注意：该参数在高版本Chrome中已不再生效，仅作为兼容旧版本的备选方案。

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