Open or save a file after downloading in angular

Question

I have a use case where if file can be opened in new tab, it should be opened in new tab. If not, it gets saved with the given name(name should be the one set dynamically).

I have following snippet currently:

         if (windowService.navigator.msSaveOrOpenBlob) {
             windowService.navigator.msSaveOrOpenBlob(file, fileName);
         } else {
             const link: HTMLAnchorElement = document.createElement("a") as HTMLAnchorElement;
             link.href = windowService.URL.createObjectURL(file);
             if (fileName) {
                 link.download = fileName;
             }
             link.target = "_blank";
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
         }

When I use this, all the files are downloaded(including pdf/text which otherwise when tried with window.open() opens in a new tab). My requirement is: if files can be opened in new tab, they should be opened in a new tab(Ex. pdf/text etc(which open in a new when tried with window.open()).). I understand that I can use window.open() but that doesn't support setting desired name to file.

Is there a way to achieve this? Also how can I determine if file can be opened in new tab before downloading it? If I know file cannot be opened, in that case I download else I open it in a new tab.

Answer 1

The same requirement we solved using:

1. standard <a/> tags in the html of the client, to enable the browser to handle them in the standard way
2. changing the webservice so it returns the file with setting Content-Disposition header to inline;

Unfortunately, the attempts of tweaking window.open or createObjectURL to show proper name of the file... proved fruitless.

Controller:

Route: server/download/{guid}

var contentDisposition = new ContentDispositionHeaderValue(DispositionTypeNames.Inline);
contentDisposition.SetHttpFileName(document.Name);
Response.Headers[HeaderNames.ContentDisposition] = contentDisposition.ToString();

component.html:

<a [class]="'document-link'"
[href]="docUrl(document.id)"
target="_blank"
title="{{document.name}}">{{document.name}}
</a>

Component.ts

docUrl(id) function just constructs the proper url to the controller.

docUrl(guid:string){
  return this.fileService.url+'/download/'+guid;
}

Answer 2

To open file after download or save.

/**
 * Method is use to download file.
 * @param data - Array Buffer data
 * @param type - type of the document.
 */
downLoadFile(data: any, type: string) {
    var blob = new Blob([data], { type: type.toString() });
    var url = window.URL.createObjectURL(blob);
    window.open(url);
}

Answer 3

To force a download you need to set Content-Disposition header in response header

Opening a file or download depends. e.g. to open PDF, If you have a PDF viewer supported in your browser it would open or else it would auto download