Open PDF in new tab, saving file gives wrong file name

1
votes

There is an Angular 6 app having a feature to download pdf files. It uses REST API from another Spring Boot application to download files.

The requirement is that i need to open pdf file in new tab and while saving it shall have a meaningful name.

I am able to get the file downloaded and open in new tab too. But while saving the file, it takes name from the url.

I tried by opening the file directly from REST API in browser and save it as well as getting blob and open in new window from angular app. Both open the files but while saving they take name from URL.

  1. Angular - Open blob in new window blob:https://defg.com/89a0396e-994b-43d0-b3e3-aaa95d47db9f If i try to download opened file, it suggests to save with name 89a0396e-994b-43d0-b3e3-aaa95d47db9f.pdf Is there a way to pass or set filename in below approach?

    var fileURL = window.URL.createObjectURL(file); window.open(fileURL, "_blank");

  2. API - Takes Encrypted name https://abcd.com/ws/fileDownload/85C1E5010AFAE309E89534FAC594C9110D74FED4DF78AAA8EE199C78B570FABF8BC6640F0563778DD963 If i try to download opened file, it suggests to save with correct name for first time, shows string from url as name from second attempt, 85C1E5010AFAE309E89534FAC594C9110D74FED4DF78AAA8EE199C78B570FABF8BC6640F0563778DD963.pdf

Inspected response, headers look good,

Content-Disposition: inline; filename= "test.pdf"

Any suggestions would be helpful. Thanks in advance.

1
javascriptjavaangularspring-bootpdf
The filename in the Content-Disposition header is ignored if the disposition is not "attachment". – Pointy
Is there a way to use filename and open a pdf in new tab? – Nagaraja JB
@Pointy You may not be fully correct saying filename will be ignored. But it behaves inconsitently in different browsers. test.greenbytes.de/tech/tc2231/#inlwithasciifilenamepdf – Nagaraja JB
I was just going by the MDN documentation. The RFC is not super-clear, as is typical. In any case as you've seen it can't be trusted to work consistently. – Pointy
@NagarajaJB - were you able to find any work-around? I am in the similar situation now – Kinley Christian

1 Answers

0
votes

You could use file-saver library as follow:

import { saveAs } from 'file-saver';
...
awesomeDownloader(url: string, fileName: string) {
  const blobFile = functionsThatGetsTheBlob(url);
  saveAs(blobFile, fileName);
}
...