0

I am currently retrieving a file from server where I set Content-Disposition: inline in the header of the response. This will preview the file in the browser if it is supported or download the file if preview is not supported. The file is opened in a new tab which you can see from the code below. 

downloadDocument(id: string) {
  const documentWindow = window.open('', '_blank');

  if (documentWindow) {
    documentWindow.opener = null;
  }

  let endpoint = Endpoints.getId(Endpoints.Document, id);
  this.genericService.getAll < DocumentClaim > (endpoint).subscribe(
    response => {
      const claim = response.claim;
      endpoint = `${endpoint}/c?=${claim}`;
      if (documentWindow) {
        documentWindow.location.href = endpoint;
      }
    }
  );
}

I want to be able to open the file in a new tab if preview is supported. If the browser is unable to preview the file I want to download the file in the current tab. Or at least I want to be able to close the new tab after the download has started. I have not been able to find a way to achieve this.

Is there any way to check what kind of mime types that a browser can preview? I know about window.navigator.mimeTypes but this does not seem to give me all mime types that can be previewed. I can't find any image mimetypes in this list but images are previewed in Chrome.

andbjer
  • 554
  • 2
  • 9
  • "Or at least I want to be able to close the new tab after the download has started" — What browser doesn't do that automatically? Chrome certainly does. – Quentin Sep 04 '18 at 09:04
  • Longshot: Your code is fetched from said server? (i.e same-origin is clear?) Then you could try to read up document in the window that has been opened and see if it is already closed or empty (probably got to download) or with some content (probably supported). – Kaiido Sep 04 '18 at 09:06
  • @Quentin it does not close automatically in Chrome with the code above. – andbjer Sep 04 '18 at 09:11
  • @andbjer `window.open(url)` would. It doesn't because you are setting its `location.href` after it's been opened. – Kaiido Sep 04 '18 at 09:12
  • @Kaiido thank you! the reason i did it like this was to prevent the window to be blocked. Is there a way to achieve both things? [Avoid browser popup blockers](https://stackoverflow.com/questions/2587677/avoid-browser-popup-blockers) – andbjer Sep 04 '18 at 09:21
  • You would have to fetch the endpoint before or displaying a kind of "download is being generated" then "Click to download". – Kaiido Sep 04 '18 at 09:27

1 Answers1

0

This is what I ended up with. I wait until the url for the file is ready before I open the file. The window will be blocked the first time since we have to wait a round trip before we open a new window. If the window is blocked I display some message to the user to tell them to deactivate the popup blocker for the site.

downloadDocument(id: string) {
  let endpoint = Endpoints.getId(Endpoints.Document, id);
  this.genericService.getAll<DocumentClaim>(endpoint).subscribe(
    response => {
      const claim = response.claim;
      endpoint = `${endpoint}/c?=${claim}`;
      const documentWindow = window.open(endpoint, '_blank');
      if (documentWindow) {
        documentWindow.opener = null;
      } else {
        // show some info to user to turn off popup blocker for the site
      }
    }
  );
}
andbjer
  • 554
  • 2
  • 9