简体   繁体   English

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

[英]How to set PDF title for base64 file while opening in new tab

I'm trying to open a base64 PDF file in a new tab by using iframe.我正在尝试使用 iframe 在新选项卡中打开 base64 PDF 文件。 While opening that PDF in new tab file name is showing as data: attached my screenshot below.在新选项卡文件名中打开 PDF 时显示为数据:在下面附上我的屏幕截图。 How can I change or set the file name?.如何更改或设置文件名?

Note: I don't want to download the PDF I need to open in a new tab.注意:我不想下载 PDF 我需要在新标签中打开。 Thanks in advance提前致谢

My Code我的代码

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

在此处输入图像描述

Maybe this way you can use.也许这种方式你可以使用。 There may have been a mistake in the arrangements.安排可能有错误。

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();

There is a way to show the filename you want, but it needs to save the base64 to LocalFileSystem .有一种方法可以显示您想要的文件名,但它需要将 base64 保存到LocalFileSystem

Then the iframe load this file in LocalFileSystem .然后 iframe 在LocalFileSystem中加载这个文件。

And it needs user to grant permission once to the browser.它需要用户向浏览器授予一次权限。 在此处输入图像描述

It works on Chrome.它适用于 Chrome。 You can refer to below demo:你可以参考下面的demo:

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

Souce:资源:

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

The download button fail to work...下载按钮失效了...

Edit:编辑:

If you would like to use pdf.js, you can refer to:如果想使用pdf.js,可以参考:

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

The title that you are refering to is in the metadata of the PDF document itself.您引用的标题在 PDF 文档本身的元数据中。 You will need to edit the title in the document.您将需要编辑文档中的标题。

You can use an online editor (like https://pdfcandy.com/edit-pdf-meta.html ) or any suitable PDF application.您可以使用在线编辑器(例如https://pdfcandy.com/edit-pdf-meta.html )或任何合适的 PDF 应用程序。

If you are generating your PDF's on the backend you need to set the proper metadata over there.如果您在后端生成 PDF,则需要在那里设置正确的元数据。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM