如何在新选项卡中打开时为 base64 文件设置 PDF 标题答案

【问题标题】：How to set PDF title for base64 file while opening in new tab如何在新选项卡中打开时为 base64 文件设置 PDF 标题
【发布时间】：2020-06-08 09:27:35
【问题描述】：

我正在尝试使用 iframe 在新选项卡中打开 base64 PDF 文件。在新选项卡文件名中打开该 PDF 时，显示为 data: 在下面附上了我的屏幕截图。如何更改或设置文件名？

注意：我不想下载需要在新标签页中打开的 PDF。提前致谢

我的代码

const pdfWindow = window.open('');
pdfWindow.document.write(
  "<iframe width='100%' height='100%' src='data:application/pdf;base64, " +
    encodeURI(base64PDF) +
    "'></iframe>",
);

【问题讨论】：

你是指HTML页面中<title>标签的结果吗？

标签： javascript

【解决方案1】：

也许这种方式你可以使用。安排可能有错误。

let file = 'data:application/pdf;base64'
let prntWin = window.open();
prntWin.document.write("<html><head><title>your title in here</title></head><body>"
    + '<iframe width="100%" height="100%" src="'+ file + '" '
    + 'type="application/pdf" ></body></html>');
prntWin.document.close();

【讨论】：

感谢您的 cmets。这将设置标题。我需要更改或设置文件名。查看我在左上角的截图
我必须显示在新选项卡中打开的 PDF 文档的选项卡标题，这对我来说效果很好。我之前只是在 document.write 中给出 iframe。谢谢。

【解决方案2】：

有一种方法可以显示你想要的文件名，但它需要将base64保存到LocalFileSystem。

然后 iframe 在 LocalFileSystem 中加载这个文件。

它需要用户向浏览器授予一次权限。

它适用于 Chrome。可以参考下面的demo：

https://pdf-filename.glitch.me/

来源：

https://glitch.com/edit/#!/pdf-filename?path=index.html%3A1%3A0

下载按钮失效...

编辑：

如果你想使用pdf.js，可以参考：

https://daniel4wong-pdfjs-demo.glitch.me/

【讨论】：

感谢您的 cmets。您是否注意到在新标签页中打开 PDF 时无法下载。
哦，好伤心。您是否尝试使用 pdf.js viewer.html，这将具有不同的布局，但这将是大多数浏览器可以具有相似布局的跨浏览器解决方案，您可以看到mozilla.github.io/pdf.js/es5/web/viewer.html
将库下载到你的web后，你可以使用库传递base64字符串（可能是缓冲区数组或blob）在iframe中打开pdf，甚至可以控制iframe中的DOM显示/隐藏/添加您想要的按钮

【解决方案3】：

您所引用的标题位于 PDF 文档本身的元数据中。您需要编辑文档中的标题。

您可以使用在线编辑器（如 https://pdfcandy.com/edit-pdf-meta.html）或任何合适的 PDF 应用程序。

如果您在后端生成 PDF，则需要在那里设置正确的元数据。

【讨论】：