Pdf Blob - Pop Up Window Not Showing Content

PDF Blob - Pop up window not showing content

You need to set the responseType to arraybuffer if you would like to create a blob from your response data:

$http.post('/fetchBlobURL',{myParams}, {responseType: 'arraybuffer'})
   .success(function (data) {
       var file = new Blob([data], {type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
       window.open(fileURL);
});

more information: Sending_and_Receiving_Binary_Data

PDF Blob is not showing content, Angular 2

I had a lot of problems with downloading and showing content of PDF, I probably wasted a day or two to fix it, so I'll post working example of how to successfully download PDF or open it in new tab:

myService.ts

downloadPDF(): any {
        return this._http.get(url, { responseType: ResponseContentType.Blob }).map(
        (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        }
}

myComponent.ts

this.myService.downloadPDF().subscribe(
        (res) => {
            saveAs(res, "myPDF.pdf"); //if you want to save it - you need file-saver for this : https://www.npmjs.com/package/file-saver

        var fileURL = URL.createObjectURL(res);
        window.open(fileURL); / if you want to open it in new tab

        }
    );

NOTE

It is also worth mentioning that if you are extending Http class to add headers to all your requests or something like that, it can also create problems for downloading PDF because you will override RequestOptions, which is where we add responseType: ResponseContentType.Blob and this will get you The request body isn't either a blob or an array buffer error.

Image Blob - Pop up window not showing content

You can use XMLHttpRequest() or fetch() to get response as Blob

let url, w;
let request = fetch("/path/to/image");

request.then(function(response) {
  return response.blob() // return `Promise` which resolves to `Blob` of response
})
.then(function(blob) {
  url = URL.createObjectURL(blob);
  w = window.open(url);
})
.catch(function(err) {
  console.log(err)
});

let url, w;

let request = new XMLHttpRequest();
request.open("GET", "/path/to/image");
request.responseType = "blob"; // set `responseType` to `"blob"`
request.onload = function() {
  url = URL.createObjectURL(blob);
  w = window.open(url);
}
request.onerror = function(e) {
  console.log(e);
}
request.send(null);

Issue while printing pdf files from Blob angular

Pdf file takes time to load thats why it was showing blank document, So i used print-js to solve this issue.

how to import

import * as printJS from "print-js";

how to use

const blobUrl = URL.createObjectURL(_fileInfo.blob);
printJS(blobUrl);

---

Related Topics