Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display a javascript File object in Chrome's PDF viewer with its name?

I've got a PDF file in the form of a Blob object (generated with jsPDF), that I want to display in an <iframe> element.

I can do that easily this way:

iframe.src = URL.createObjectURL( blob )

The PDF is rendered correctly but I get an esoteric string in place of its name (see image below of Chrome's PDF viewer).

So I tried to convert the Blob to a File object in order to give it a human-readable name.

var file = new File( [blob], 'a_name.pdf', { type: 'application/pdf' } )
iframe.src = URL.createObjectURL( file )

It works with Firefox: the name is kept when saving the file from the header's PDF viewer. Unfortunately it is dropped in Chrome and replaced with a random file name before being loaded in the PDF viewer.

Do you know if it is possible to display the PDF File object in the <iframe> with its file name?

Chrome's PDF viewer

like image 960
Supersharp Avatar asked Nov 17 '16 14:11

Supersharp


People also ask

Can I set the filename of a PDF object displayed in Chrome?

In Chrome, the filename is derived from the URL, so as long as you are using a blob URL, the short answer is "No, you cannot set the filename of a PDF object displayed in Chrome." You have no control over the UUID assigned to the blob URL and no way to override that as the name of the page using the object element.

How do I change the title of a PDF in iframe?

Open the PDF document in Adobe Acrobat Pro: Select File > Properties. Select the Description tab to view the metadata in the document, including the document information dictionary. Modify the Title field to add or change the document's Title entry.

Does Chrome execute JavaScript in PDF?

Granted, most PDF readers (besides Adobe Reader) don't implement most of this stuff. But Chrome does implement JavaScript! If you open a PDF file like this one in Chrome, it will run the scripts. I found this fact out after following this blog post about how to make PDFs with JS.


1 Answers

You can set the title of the PDF generated by jsPDF with the setProperties method:

var doc = new jsPDF();
doc.setProperties({
    title: "This is my title"
});
...

That title will be displayed in the PDF viewer in Chrome. You can test it in the Live Demo page.

like image 127
ConnorsFan Avatar answered Oct 27 '22 00:10

ConnorsFan