ng2-pdfjs-viewer
ng2-pdfjs-viewer copied to clipboard
Open blob on new tab (issue ie-edge)
Hello, I'm trying to open a blob of a pdf in a new tab for my angular application using this awesome library.
This is my code
private downloadPdf(data: Blob, fileName: string) { const viewer = new PdfJsViewerComponent(); viewer.pdfSrc = data; viewer.externalWindow = true; viewer.openFile = false; viewer.viewBookmark = false; viewer.download = false; viewer.downloadFileName = fileName; viewer.refresh(); }
It work on Chrome and Firefox but ieplorer and edge have problem on showing the pdf
Microsoft Edge 44.18362.449.0
Microsoft Internet Explorer 11.657.18362.0
Somebody suggest to incule polyfills on issue #13 but doesn't work for me.
What can I do? Thanks in advance.
I have the same issue. Works in Chrome not in IE browser. Any fix for this issue?
Thanks.
@Javaluca @JavaAngularVV Verified it works on latest Edge(chromium based)
@JavaAngularVV : Your specific issue is reported here against angular. A workaround is suggested: https://github.com/angular/angular-cli/issues/5762
@Javaluca : I found this. Seems to be a CORS issue. You may start here: https://stackoverflow.com/questions/56883808/pdf-js-message-unexpected-server-response-0-while-retrieving-pdf
@codehippie1: tried the workaround and it didn't work. getting below error.
I am reading the Pdf file from a server location in the API service call and returning it as byte[] to the UI. below is the code: html : <ng2-pdfjs-viewer #externalPdfViewer [externalWindow]="true" openFile="false" [useOnlyCssZoom]=true>
component.ts: readPdfData(pdfFilePath: string) { this._homeService.getpdfByteArray(pdfFilePath). subscribe(pdfData => { //var file = new Blob([pdfData], { type: 'application/pdf' }); this.externalPdfViewer.pdfSrc = pdfData; this.externalPdfViewer.refresh(); }, error => { console.error(error); }); }
HomeService.ts: getpdfByteArray(pdfFilePath: string) { console.log('pdfFilePath = ', pdfFilePath); // file path on the server return this._http.get(environment.pdfByteArrayApiUrl + pdfFilePath, { responseType: 'blob' }) .pipe( map((result: any) => { return result; }) ); }
web service API: @RequestMapping(value = "/getPdfByteArray", method = RequestMethod.GET, produces = MediaType.APPLICATION_PDF_VALUE) public ResponseEntity<byte[]> getPdfByteArray( @RequestParam(value = "pdfFilePath", required = true) String pdfFilePath) throws IOException { byte[] bytes = null; try {
System.out.println("in getPdfByteArray file path = " + pdfFilePath);
InputStream is = new BufferedInputStream(new FileInputStream(pdfFilePath));
bytes = StreamUtils.copyToByteArray(is);
return ResponseEntity.ok().contentType(MediaType.APPLICATION_PDF).body(bytes);
} catch (FileNotFoundException e) {
// when file not found
pdfFilePath = "/apps/pdfreports/whennopdffilefound.pdf";
InputStream is = new BufferedInputStream(new FileInputStream(pdfFilePath));
bytes = StreamUtils.copyToByteArray(is);
return ResponseEntity.ok().contentType(MediaType.APPLICATION_PDF).body(bytes);
}
}
I have exactly the same two errors in Edge and IE11. Any idea? I've tried lots of things and nothing worked... In IE11 i've just found that if I click two times in the link to open the external tab the second time works fine....