Okay, I've read just about every Stack Overflow question on PDF downloading from a web service. None of them have helped me so far. I'm using this as a last ditch effort to try and get some answers. Basically, I'm making a GET request to the API, and need to get a dynamically generated PDF back. We've tried doing this with receiving a byte[] and now we're returning a stream with the content. The following is what we have in the web service controller:
var result = await resp.Content.ReadAsAsync<byte[]>();
var response = request.CreateResponse(HttpStatusCode.OK);
var dataStream = new MemoryStream(result);
response.Content = new StreamContent(dataStream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
response.Content.Headers.ContentDisposition.FileName = "idcard.pdf";
var fileStream = new FileStream(#"c:\temp\temp.pdf", FileMode.Create);
fileStream.Write(result, 0, result.Length);
fileStream.Close();
return response;
The FileStream part is a test we were doing to see if saving the data to a temporary file worked and that the PDF can be saved. That part does work. Going to c:\temp and opening the idcard.pdf file works perfectly. One of the problems with that is it does it silently and the user wouldn't know it's there. We can tell them, but we'd really prefer the PDF to open in the browser by default and/or have it save through the browser so they knew something happened.
My Angular code looks like this:
.factory('memberIdCard', ['$http', function($http) {
var get = function() {
return $http({
method: 'GET',
url: '/Member/IdCard',
headers: {
accept: 'application/octet-stream'
},
responseType: 'arraybuffer',
transformResponse: function(data) {
var pdf;
console.log('data: ', data);
if (data) {
pdf = new Blob([data], {
type: 'application/pdf'
});
console.log('pdf: ', pdf);
}
return pdf;
}
})
}
return {
get: get
}
}]);
I have tried this part with $http and $resource and neither works. Now, in my controller:
$scope.printIdCard = function() {
memberIdCard.get().then(function(data) {
var pdf = data.data;
FileSaver.saveAs(pdf, 'idcard.pdf');
var pdfUrl = window.URL.createObjectURL(pdf);
$scope.pdfView = $sce.trustAsResourceUrl(pdfUrl);
window.open($scope.pdfView);
});
As a note, FileSaver is from angular-file-saver.
After all that, the new window opens, but there's an error that says: Failed to load PDF Document, and if you try and open it in Adobe Acrobat it has an error that says: Adobe Acrobat Reader DC could not open 'idcard.pdf' because it is either not a supported file type or because the file has been damaged (for example, it was sent as an email attachment and wasn't correctly decoded).
Any help would be greatly appreciated. I feel like I've done everything that was suggested in many of the other SO questions, but maybe I'm missing something I just haven't been able to see.
Thanks!
I did something similar for .xlsx files, but the concept is the same. Hope this can help you, its working for me.
I got the javascript code to download the file from another SO answer, which I can't link because I don't remember where it was.
My web api controller looks like this:
[Route("all")]
[HttpGet]
public HttpResponseMessage GetAll(HttpRequestMessage request)
{
HttpResponseMessage response = null;
MemoryStream stream = _exportService.CreateDataStream();
response = request.CreateResponse(HttpStatusCode.OK);
response.Content = new ByteArrayContent(stream.GetBuffer());
response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
response.Content.Headers.Add("content-type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
return response;
}
And the angular service:
(function (app) {
'use strict';
app.factory('exportService', exportService);
exportService.$inject = ['$q', '$http'];
function exportService($q, $http) {
var extension = '.xlsx';
var service = {
export: exportData
};
function exportData(event, fname){
var config = {
responseType: 'arraybuffer'
}
var path = 'api/export/'+event;
var deferred = $q.defer();
return $http.get(path, config).then(
function(response) {
var data = response.data;
var status = response.status;
var headers = response.headers();
var octetStreamMime = 'application/octet-stream';
var success = false;
var filename = fname + extension;
var contentType = headers['content-type'] || octetStreamMime;
try
{
// Try using msSaveBlob if supported
var blob = new Blob([data], { type: contentType });
if(navigator.msSaveBlob)
navigator.msSaveBlob(blob, filename);
else {
// Try using other saveBlob implementations, if available
var saveBlob = navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob;
if(saveBlob === undefined) throw "Not supported";
saveBlob(blob, filename);
}
success = true;
deferred.resolve();
} catch(ex)
{
}
if(!success)
{
// Get the blob url creator
var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
if(urlCreator)
{
// Try to use a download link
var link = document.createElement('a');
if('download' in link)
{
// Try to simulate a click
try
{
// Prepare a blob URL
var blob = new Blob([data], { type: contentType });
var url = urlCreator.createObjectURL(blob);
link.setAttribute('href', url);
// Set the download attribute (Supported in Chrome 14+ / Firefox 20+)
link.setAttribute("download", filename);
// Simulate clicking the download link
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
success = true;
deferred.resolve();
} catch(ex) {
}
}
if(!success)
{
// Fallback to window.location method
try
{
var blob = new Blob([data], { type: octetStreamMime });
var url = urlCreator.createObjectURL(blob);
window.location = url;
success = true;
deferred.resolve();
} catch(ex) {
deferred.reject();
}
}
}
}
return deferred.promise;
},
function(error) {
return $q.reject(error);
});
}
return service;
}
})(angular.module('core.module'));
Related
Hi I'm tired after trying each solution but not able to make it work.
my http call in angular is
$http({
method: 'GET',
url: API_URL + 'v1/file/' + candidateId + '/download',
headers: {
'authToken': AuthService.getToken(),
},
responseType: 'arraybuffer'
})
.then(function onSuccess(response) {
successCallback(response);
},
function onError(response) {
errorCallback(response);
});
and in Success of this code
vm.onSuccessDownloadResume = function(response) {
var blob = new Blob([response.data], {type: response.headers('content-type')});
var objectUrl = URL.createObjectURL(blob);
window.open(objectUrl);
};
I tried webkitURL.createObjectURL(blob), it's working fine for chrome only but URL.createObject is not at all working.
getting message
URL.createObjectURL() is not a function()
Thanks
There's some compatibility issues related to createObjectURL, you can see more here: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
And with Blob: https://developer.mozilla.org/en-US/docs/Web/API/BlobBuilder#Browser_compatibility
I had a similar issue, and this SO link helped me with a workaround: Blob constructor browser compatibility
I've copied this function and made some minor changes:
var NewBlob = function(data, datatype)
{
var out;
try {
out = new Blob([data], {type: datatype});
console.debug("case 1");
}
catch (e) {
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
if (e.name == 'TypeError' && window.BlobBuilder) {
var bb = new BlobBuilder();
bb.append(data);
out = bb.getBlob(datatype);
console.debug("case 2");
}
else if (e.name == "InvalidStateError") {
// InvalidStateError (tested on FF13 WinXP)
out = new Blob([data], {type: datatype});
console.debug("case 3");
}
else {
// We're screwed, blob constructor unsupported entirely
console.debug("Errore");
}
}
return out;
}
I am getting byte array in service response and that image would be shown in an image field of my html page. Any idea how can i implement this. I tried to find out solution for this over stack overflow but not able to get valid solution. Please help. My code is:
this.getPrescription = function(pres_id) {
var deff = $q.defer();
$http({
method: "GET",
url: "www.abc.com/api/&prescriptionOnly=false&page=1",
headers: {
'Authorization': 'Bearer ' + localStorage.getItem("chemist_access_token"),
'Content-Type': 'application/json'
},
responseType: 'arraybuffer'
}).then(function(objS) {
console.log("getPrescription:\n" + JSON.stringify(objS))
deff.resolve(objS);
}, function(objE) {
errorHandler.serverErrorhandler(objE);
deff.reject(objE);
});
return deff.promise;
};
and in my controller I am calling like:
$scope.getPrescription = function(id) {
$ionicLoading.show({
template: '<ion-spinner icon="spiral"></ion-spinner>',
noBackdrop: false
});
serverRepo.prescriptionGet(id).then(function(objS) {
console.log("orderByCustomer:\n" + JSON.stringify(objS));
$scope.picdata=$window.URL.createObjectURL(new Blob([objS.data], {type: 'image/png'}));
$ionicLoading.hide();
console.log("getOrderByNew_success_loadMore:\n" +$scope.picdata);
}, function(objE) {
$ionicLoading.hide();
});
}
and when I check my console it showing:
getOrderByNew_success_loadMore:
blob:file:///0aa86d9f-61a1-4049-b18c-7bf81e05909f
Use this filter to convert byte array to base64
app.filter('bytetobase', function () {
return function (buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
};
});
to bind it as image use
<img ng-src="data:image/JPEG;base64,{{picture | bytetobase}}" alt="..." width="100" height="100">
Or if you need to assign it a variable use
var image = $filter('bytetobase')($scope.picture );
If you need to display and image from byte array you can create an object using Blob and get it's URL to pass into the image tag source. The last parameter in Blob constructor contains information about blob type, so you should set correct type during blob creation.
$http.get(url, {responseType: 'arraybuffer'})
.then(function(response) {
return $window.URL.createObjectURL(new Blob([response.data], {type: 'image/png'}));
});
And when you don't plan to work with your object any longer (e.g. after image has been loaded in appropriate img tag)
Update
Alternative solution with base64
$scope.getPrescription = function(id) {
$ionicLoading.show({
template: '<ion-spinner icon="spiral"></ion-spinner>',
noBackdrop: false
});
serverRepo.prescriptionGet(id).then(function(objS) {
console.log("orderByCustomer:\n" + JSON.stringify(objS));
// Creating file reader
var reader = new window.FileReader();
// Creating blob from server's data
var data = new Blob([objS.data], {type: 'image/jpeg'});
// Starting reading data
reader.readAsDataURL(data);
// When all data was read
reader.onloadend = function() {
// Setting source of the image
$scope.picdata = reader.result;
// Forcing digest loop
$scope.$apply();
}
$ionicLoading.hide();
console.log("getOrderByNew_success_loadMore:\n" +$scope.picdata);
}, function(objE) {
$ionicLoading.hide();
});
}
I'm following Heroku's tutorial on direct uploads to Amazon S3.
After getting a signed request from AWS through the Node.js app, they use a "normal" XMLHttpRequest to send the file.
This is their function:
function upload_file(file, signed_request, url){
var xhr = new XMLHttpRequest();
xhr.open("PUT", signed_request);
xhr.setRequestHeader('x-amz-acl', 'public-read');
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById("preview").src = url;
document.getElementById("avatar_url").value = url;
}
};
xhr.onerror = function() {
alert("Could not upload file.");
};
xhr.send(file);
}
Now, I'm working with Cordova and, since I don't get a File object from the camera plugin, but only the file URI, I used Cordova's FileTransfer to upload pictures to my Node.js app with multipart/form-data and it worked fine.
However, I can't manage to make it work for Amazon S3.
Here's what I have:
$scope.uploadPhoto = function () {
$scope.getSignedRequest(function (signedRequest) {
if (!signedRequest)
return;
var options = new FileUploadOptions();
options.fileKey = 'file';
options.httpMethod = 'PUT';
options.mimeType = 'image/jpeg';
options.headers = {
'x-amz-acl': 'public-read'
};
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload($scope.photoURI, encodeURI(signedRequest.signed_request), function () {
// success
}, function () {
// error
}, options);
});
};
I've tried both chunkedMode = true and chunkedMode = false, but neither the success nor the error callback is called.
So, is there a way to upload a file to S3 with FileTransfer?
Do I actually need the signed request or is it only necessary if I use XHR?
Any hint is appreciated.
I ended up with this function in Cordova:
$scope.uploadPhoto = function () {
$scope.getSignedRequest(function (signedRequest) {
if (!signedRequest)
return;
var options = new FileUploadOptions();
options.chunkedMode = false;
options.httpMethod = 'PUT';
options.headers = {
'Content-Type': 'image/jpeg',
'X-Amz-Acl': 'public-read'
};
var ft = new FileTransfer();
ft.upload($scope.photoURI, signedRequest.signedUrl, function () {
$scope.$apply(function () {
// success
});
}, function () {
$scope.$apply(function () {
// failure
});
}, options);
});
};
The important bits are setting the Content-Type header, so that multipart/form-data won't be used, and chunkedMode = false to send the file with a single request.
EDIT: Removed changes to the plugin code which were, in hindsight, useless (outdated plugin).
Not able to add comment:
Strange. Works for me using $cordovaFileTransfer.upload. I don't have the 'x-amz-acl': 'public-read' header. Also I don't use encodeURI on the signed url. Have you been able to debug it? See any errors? I used chrome://inspect and port forwarding to connect to my app running on the phone, so I was able to debug the response from Amazon. Might be another reason why it's failing.
I have written a directive based on Scott's answer. You'd use it like so:
<button class="btn btn-success"
download-response="getData()"
download-success="getDataSuccess()"
download-error="getDataError()"
download-name="{{name}}.pdf"
download-backup-url="/Backup/File.pdf">
Save
</button>
Issue: the code below throws an error TypeError: Invalid calling object in IE11 on the first method (line: saveBlob(blob, filename);). Even though it falls back to other methods of downloading, it is my understanding that the saveMethod1 should work in IE11.
Here is the code:
'use strict';
// directive allows to provide a function to be executed to get data to be downloaded
// attributes:
// download-response - Required. Function to get data. It must return a promise. It must be declared on the $scope.
// download-success - Optional. Function to be executed if download-response function was successfully resolved. It must be declared on the $scope.
// download-error - Optional. Function to be executed if download-response function return a promise rejection. It must be declared on the $scope.
// download-mime - Optional. provide a mime type of data being downloaded. Defaulted to "application/octet-stream"
// download-name - Optional. name of the file to download. Defaulted to "download.bin"
// download-backup-url - in case browser does not support dynamic download, this url will be called to get the file
angular.module('app.directives')
.directive('downloadResponse', [ '$parse', '$timeout',
function ($parse, $timeout) {
function saveMethod1(data, filename, contentType) {
// Support for saveBlob method (Currently only implemented in Internet Explorer as msSaveBlob, other extension in case of future adoption)
var saveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob;
if (saveBlob) {
// Save blob is supported, so get the blob as it's contentType and call save.
var blob = new Blob([data], { type: contentType });
saveBlob(blob, filename);
//console.log("SaveBlob Success");
} else {
throw 'saveBlob is not supported. Falling back to the next method';
}
}
function saveMethod2(data, filename, contentType, octetStreamMime) {
// Get the blob url creator
var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
if (urlCreator) {
// Try to use a download link
var link = document.createElement("a");
var url;
if ("download" in link) {
// Prepare a blob URL
var blob = new Blob([data], { type: contentType });
url = urlCreator.createObjectURL(blob);
link.setAttribute("href", url);
// Set the download attribute (Supported in Chrome 14+ / Firefox 20+)
link.setAttribute("download", filename);
// Simulate clicking the download link
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
//console.log("Download link Success");
} else {
// Prepare a blob URL
// Use application/octet-stream when using window.location to force download
var blob = new Blob([data], { type: octetStreamMime });
url = urlCreator.createObjectURL(blob);
window.location = url;
//console.log("window.location Success");
}
} else {
throw 'UrlCreator not supported. Falling back to the next method';
}
}
function saveMethod3(attrs) {
if (attrs.downloadBackupUrl && attrs.downloadBackupUrl != '') {
console.log('opening ' + attrs.downloadBackupUrl);
window.open('http://' + document.domain + attrs.downloadBackupUrl, '_blank');
} else {
throw 'Could not download a file using any of the available methods. Also you did not provide a backup download link. No more bullets left...';
}
}
return {
restrict: 'A',
scope: false,
link:function (scope, elm, attrs) {
var getDataHandler = $parse(attrs.downloadResponse);
elm.on('click', function() {
var promise = getDataHandler(scope);
promise.then(
function (data) {
if (attrs.downloadSuccess && attrs.downloadSuccess != '') {
var successHandler = $parse(attrs.downloadSuccess);
successHandler(scope);
}
var octetStreamMime = "application/octet-stream";
var filename = attrs.downloadName || "download.bin";
var contentType = attrs.downloadMime || octetStreamMime;
try {
saveMethod1(data, filename, contentType);
return;
} catch (e) {
console.log(e);
try {
saveMethod2(data, filename, contentType, octetStreamMime);
return;
} catch (e) {
console.log(e);
try {
saveMethod3(attrs);
return;
} catch (e) {
throw e;
}
throw e;
}
throw e;
}
},
function(data) {
if (attrs.downloadError && attrs.downloadError != '') {
var errorHandler = $parse(attrs.downloadError);
errorHandler(scope);
}
}
);
});
}
};
}
]);
Any help is greatly appreciated!
Problem:
I have resolved this issue. It appears that Internet Explorer 11 does not like aliases to the msSaveBlob function, demonstrated by the simplest examples:
// Succeeds
navigator.msSaveBlob(new Blob(["Hello World"]), "test.txt");
// Fails with "Invalid calling object"
var saveBlob = navigator.msSaveBlob;
saveBlob(new Blob(["Hello World"]), "test.txt");
So essentially the generic alias created to encapsulate saveBlob functionality, which should be permissible, prevents msSaveBlob from working as expected:
var saveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob;
Workaround:
So the work around is to test for msSaveBlob separately.
if(navigator.msSaveBlob)
navigator.msSaveBlob(blob, filename);
else {
// Try using other saveBlob implementations, if available
var saveBlob = navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob;
if(saveBlob === undefined) throw "Not supported";
saveBlob(blob, filename);
}
tl;dr
So the msSaveBlob method works, as long as you don't alias the function. Perhaps it's a security precaution - but then perhaps a security exception would have been more appropriate, though I think it is most likely a flaw, considering the source. :)
I am getting image from the server in Base64 encoding.
My Base64 response is correct.
On the client side I am using following :
var blob = base64ToBlob(content, {type: 'image/jpeg'});
URL = window.URL || window.webkitURL;
var blobUrl = URL.createObjectURL(blob);
//Displaying image in div works.
var elImage = $("#dbimage");
elImage.append("<img src='data:image/jpeg;base64," + content+ " '/>");
///This doesn;t work.
return blobUrl;
var base64ToBlob = function(base64) {
var binary = atob(base64);
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
view[i] = binary.charCodeAt(i);
}
return new Blob([view], {type: 'image/jpeg'});
};
I am returning the blobURL to HandleBar template. It does not seem to recognize the blob.
This conversion is encapsulated in a promise. In the HandleBar template I am writing something like this :
<img {{bind-attr src=image.content}} />
This promise is present in the image attribute. The image displayed in the div works fine, but the one in the blob does not display.
Edit :
I am returning the promise, like this :
image : function() {
var promise = jQuery.ajax({
url: '/getattachments/?id=' + this.id + "&name=" + docname,
contentType: 'image/jpeg',
type: 'GET',
processData : false,
success: function(content) {
var blob = base64ToBlob(content, { type: 'image/jpeg'} );
URL = window.URL || window.webkitURL;
var blobUrl = URL.createObjectURL(blob);
return blobUrl;
},
error : function(content)
{
Em.Logger.info('Model:', this.id, 'has no image', err);
return '';
}
return DS.PromiseObject.create({ promise: promise });
}.property('_attachments'),
});
Pl help.
Thanks.
In the particular answer you provided there are a couple of little issues.
The property needs to be a computed property, not just a function
foo: function(){
}.property() // <-------this here
Additionally you were using part of Ember Data (the DS namespace) which isn't part of Ember, it is a separate product. This is fine, but you'll need to include the file if you're going to use it.
And since the promise is returning straight text, and not an object, you'll need to hook up to the content property of the promise object.
<img {{bind-attr src=img.content}}/>
http://emberjs.jsbin.com/qiyodojo/8/edit