In my Angular project, I utilize $resource for all the requests to the Web API. However, I recently encountered an issue with handling data from a request for a PDF file. After some research, I came across a snippet that worked perfectly using $http. Despite trying to achieve the same result using $resource, I have been unsuccessful:
$http.get('/api/pdf/shipper',
{responseType:'arraybuffer'})
.success(function (response) {
var file = new Blob([(response)], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
$scope.content = $sce.trustAsResourceUrl(fileURL);
});
It worked flawlessly with the help of the $sce service to validate the URL and assign it to $scope.content for display in a pop-up window. However, when I tried to implement the same functionality using $resource as part of a service for all the page's requests, I encountered a problem:
InvoicePDF: $resource('/api/pdf/invoice', {}, {
method: 'GET',
headers: {
accept: 'application/pdf'
},
responseType: 'arraybuffer',
cache: true,
transformResponse: function (data) {
var pdf;
if (data) {
pdf = new Blob([data], {
type: 'application/pdf'
});
}
return {
response: pdf
};
}
})
Subsequently, when calling this from the controller:
SAJAPdata.InvoicePDF.get().$promise.then(function(pdf) {
$scope.content = $sce.trustAsResourceUrl(pdf);
});
I faced an issue where Angular complained about [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: resourceUrl.
Any suggestions or insights would be greatly appreciated.