PDF Blob - Pop up window not showing content PDF Blob - Pop up window not showing content javascript javascript

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


If you set { responseType: 'blob' }, no need to create Blob on your own. You can simply create url based with response content:

$http({    url: "...",    method: "POST",    responseType: "blob"}).then(function(response) {    var fileURL = URL.createObjectURL(response.data);    window.open(fileURL);});


I use AngularJS v1.3.4

HTML:

<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button>

JS controller:

'use strict';angular.module('xxxxxxxxApp')    .controller('MathController', function ($scope, MathServicePDF) {        $scope.downloadPdf = function () {            var fileName = "test.pdf";            var a = document.createElement("a");            document.body.appendChild(a);            MathServicePDF.downloadPdf().then(function (result) {                var file = new Blob([result.data], {type: 'application/pdf'});                var fileURL = window.URL.createObjectURL(file);                a.href = fileURL;                a.download = fileName;                a.click();            });        };});

JS services:

angular.module('xxxxxxxxApp')    .factory('MathServicePDF', function ($http) {        return {            downloadPdf: function () {            return $http.get('api/downloadPDF', { responseType: 'arraybuffer' }).then(function (response) {                return response;            });        }    };});

Java REST Web Services - Spring MVC:

@RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf")    public ResponseEntity<byte[]> getPDF() {        FileInputStream fileStream;        try {            fileStream = new FileInputStream(new File("C:\\xxxxx\\xxxxxx\\test.pdf"));            byte[] contents = IOUtils.toByteArray(fileStream);            HttpHeaders headers = new HttpHeaders();            headers.setContentType(MediaType.parseMediaType("application/pdf"));            String filename = "test.pdf";            headers.setContentDispositionFormData(filename, filename);            ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);            return response;        } catch (FileNotFoundException e) {           System.err.println(e);        } catch (IOException e) {            System.err.println(e);        }        return null;    }