URL.createObjectURL(blob): How do I give a "meaningful filename" to a dynamically generated .pdf?

Question

I'm calling a web service to generate a .pdf, then using createObjectURL and and iframe to print and display it:

    var title = "Claim-" + this.claimNumber + "-" + new Date() + ".pdf";
    var blob = new Blob([wsRequest.response], { type: 'application/pdf' });
    blob.name = title;
    if (browser() === 'IE') {
        window.navigator.msSaveOrOpenBlob(blob, title);
    } else {
        var fileURL = URL.createObjectURL(blob);
        var win = window.open();
        win.document.write('<iframe name="' + title + '" src="' + fileURL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
        win.document.title = title;

For IE, it works great: the .pdf comes up in Acrobat Reader, it displays, I can print it ... and it has a "meaningful filename".

For Chrome/embedded .pdf viewer, it also works OK: it comes up in it's own tab, and the tab has "a meaningful filename".

If Chrome brings up the image in Acrobat reader, however:

a) I get a new, blank tab (with the "meaningful name")

b) Acrobat displays a GUID - the GUID assigned by createObjectURL():

EXAMPLE: "blob:http://192.168.116.170:9080/dd554e89-0174-4b9a-bbd1-0934239a4c9"

As you can see, neither blob.name = title or <iframe name=" + title + "...> seem to help.

Q: Is there any way I can "assign a meaningful name" to a dynamically generated .pdf if Chrome opens it in an external viewer (like Acrobat)?

You will probably want to use your own pdf viewer, like e.g [pdf.js](https://mozilla.github.io/pdf.js/) from where you might be able to set the document's name. — Kaiido, May 29 '18 at 01:23

score 13 · Accepted Answer · answered May 28 '18 at 23:29

13

One way is to save the file with a filename before it's opened. Unfortunately, this may not automatically open the file.

var fileLink = document.createElement('a');
fileLink.href = fileURL;
fileLink.download = title;
fileLink.click();

Another way is to generate the PDF and filename on your web server, and offer the link remotely, rather than generate the filename locally in the browser. This might offer you more consistent timestamps because they are generated by your server rather than all the clients in different timezones. Then you and your customers will be able to logically refer to identical documents if they have any questions.

answered May 28 '18 at 23:29

Chris C.

393
2
7

3

Hi - 1) Save file to server: good thought, but not an option. 2) "Save as" instead of "Open": that's actually my workaround. I've added a configuration option for "Save to file, instead of print". But that really, really sucks :( I'd hate to sacrifice all "display immediate" functionality just because of the stupid "file name". There's *GOT* to be a better way. A standards-conforming equivalent to IE `msSaveOrOpenBlob` :( – paulsm4 May 28 '18 at 23:40
1

@paulsm4 I'm having the same problem. I need to send auth token in the ajax call, reason why it can't be just a link to a server served file. – Carl Kroeger Ihl Dec 05 '19 at 23:33
Have you ever figured this out? I'm facing the exact same issue – Matrix Aug 17 '22 at 10:42

URL.createObjectURL(blob): How do I give a "meaningful filename" to a dynamically generated .pdf?

1 Answers1