2

I'm using ng2-pdfjs-viewer to display a PDF that a user has uploaded to my server. Each time the user clicks the file in their view, the file is retrieved from the server and made into a blob and given to ng2-pdfjs-viewer to display in an externalWindow. This works fine for every browser except IE11.

At first it works alright on IE, but if I close and open the same file multiple times, after a while the pdf viewer gives me a "Unexpected server response (500) while retrieving PDF 'blob:B04FA5CB-1012-4CBC-8DFB-59C4CE02C34A'". This also happens if I open a second instance of the website with IE. When it starts giving this error, the whole browser must be closed and then I must come back to the website and try again - then it works once again.

All my requests to the server go through without trouble, I checked with Fiddler. The only thing that's given to the viewer is the blob so I don't understand where it is getting an unexpected server response. Everything works perfectly on every other browser.

Without the pdf viewer in place the files are retrieved without issue on all browsers and can on IE they can be opened with msSaveOrOpenBlob for example. The pdf viewer seems to cause the trouble.

<!--x.component.html code-->
<ng2-pdfjs-viewer #pdfViewer style="width: 800px; height: 400px"
  [externalWindow]="true"
  [downloadFileName]="'document.pdf'"
  [openFile]="false"
  [viewBookmark]="false"
  [download]="true">
</ng2-pdfjs-viewer>

//x.component.ts code

@ViewChild('pdfViewer', {static: false}) pdfViewer;

openDocument(doc: Document) {

    this.storageService.fetchDocument(doc).subscribe(
      res => {
        let type: string = res['type'];
        let file: string = res['file'];
        var promise = this.uploadService.decodeFromBase64(file);
        promise.then((result:string)=> {
          var byteArray = [];
          for (let i = 0; i < result.length; i++) {
            byteArray.push(result.charCodeAt(i));
          }
          const blob = new Blob([new Uint8Array(byteArray)], {type: type});
          var fileURL = URL.createObjectURL(blob);
          if (type == "application/pdf") {
              this.pdfViewer.pdfSrc = fileURL; 
              this.pdfViewer.refresh();
          }
          else {
              //...
          }
          })
      }
    }
Nuser60429
  • 23
  • 4

1 Answers1

2

I found this information from one another pdfjs-viewer documentation and it looks like your ng2-pdfjs-viewer also has similar issues.

Hiding and re-displaying a PDF quickly (or vice versa) results in errors. This is because the bulk of pdf.js works asynchronously. It takes some time to initialize the widget. If it's destroyed while still being initialized, you run into problems. The same happens if it's initialized while an earlier instance is still being destroyed.

Putting PDFs in tab frequently causes this problem. Switching between tabs often means that the content of one of the tabs is hidden. At the same time, the content of the new tab is shown. I've observed this when using @angular/material. The solution is to hide the first tab and to show the new tab after a timeout

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19