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; }