chrome PDF viewer can't download file

Question

Here is my situation, I got a server running a PDF generator, when I make a request with some params, it will give me back a PDF file, the PDF is not stored in the server it's generated during the runtime.

Everything goes fine, I can get the PDF open in chrome's PDF viewer, but if want to download the file, an error occurred, like the image shows.

Because Chrome go to the origin URL to request the file, but the file is not a static resource on the server.

I don't know if anybody has run into this problem?

Have you tried the solution suggested here: https://stackoverflow.com/a/21732039/510711 ? — flob, Jun 26 '17 at 09:12
@flob I have posted this in Google chrome's group, it's said that download PDF through the pdf's origin URL is the default behavior of Chrome's built in PDF viewer. Now our solution is that use 'PDF.js' as a default PDF viewer built in our server. For more info you can check the 'PDF.js' github page. — David LIu, Jun 27 '17 at 10:18
We found a solution and while posting the answer I realized it was due to the window object used for createObjectURL was garbage collected as soon as the displayed PDF replaced the website. — flob, Jun 27 '17 at 12:28

flob · Accepted Answer · 2017-06-27T12:48:23.767

Whenever you leave the website you used to create the object URL (window.URL.createObjectURL(...)) that very object will get garbage collected. So you need to keep a reference to that object somehow.

This works for us in Chrome, Firefox, Safari, iOS Safari & Android to first display the PDF in capable browsers in a new tab and allow a download afterwards (in IE it just starts the download):

function openPdfInNewTab(url,
                         postData,
                         description = 'Document',
                         filename = description + '.pdf') {
  if (!window.navigator.msSaveOrOpenBlob) {
    var tabWindow = window.open('', '_blank');
    var a = tabWindow.document.createElement('a');
    a.textContent = 'Loading ' + description + '..';
    tabWindow.document.body.appendChild(a);
    tabWindow.document.body.style.cursor = 'wait';
  } else {
    spinnerService.show('html5spinner');
  }

  $http.post(url, postData, {responseType: 'arraybuffer'})
    .then(function showDocument(response) {
      var file = new Blob([response.data], {type: 'application/pdf'});
      if (window.navigator.msSaveOrOpenBlob) {
        spinnerService.hide('html5spinner');
        window.navigator.msSaveOrOpenBlob(file, filename);
      } else {
        tabWindow.document.body.style.cursor = 'auto';
        var url = a.href = window.URL.createObjectURL(file);
        a.click();
        a.download = filename;
      }
      $timeout(function revokeUrl() {
        window.URL.revokeObjectURL(url);
      }, 3600000);
    }, handleDownloadError);
}

We have been opening PDFs in a new browser-tab and had similar issues.

For us it started working again when we use window.URL.createObjectURL instead of tabWindow.URL.createObject which displayed the PDF but didn't allow the download.

score 3 · Answer 2 · answered Jun 27 '17 at 10:35

Chrome's built in PDF viewer will download the pdf file through the PDF's origin URL. So if the PDF is generated at server runtime and if it's not stored in the sever, the download could fail.

see link here: https://productforums.google.com/forum/#!topic/chrome/YxyVToLN8ho

score 3 · Answer 3 · answered Apr 16 '19 at 10:15

Just as an additional comment:

We had the same problem on a project, on Chrome only.

Authenticated GET request would fetch the PDF as an attachment from API, and we would forward it via window.createObjectURL(blob) to the browser viewer.

The Network Error was due us invoking window.revokeObjectURL(url); after opening the PDF. When we removed that line, the blob wasn't garbage collected immediately after opening.

fetch(request)
   .then(async response => {

       if (!response.ok) {
         return reject(response.statusText);
       }

       const blob = await response.blob();
       const url = await window.URL.createObjectURL(blob);

       window.open(url, '_blank');
       URL.revokeObjectURL(url); // This line was causing the problem
       resolve();
   })
   .catch(reject)

Thank you so much for `URL.revokeObjectURL(url); // This line was causing the problem` I am 10+ hours into debugging a Chrome-specific problem, and I've narrowed it down to this line because of you. — Ryan, Mar 31 '21 at 21:33

chrome PDF viewer can't download file

3 Answers3

Linked