我的要求是在表格提交/发布时在我的角度js app中显示(新标签)/下载/嵌入PDF.
我不希望服务器返回生成的PDF的唯一标识符,而是使用$window服务打开一个新窗口,其中url指向服务器端端点,该端点根据唯一标识符返回PDf.因为我需要动态生成pdf(不存储在文件系统中).
与此相似的问题AngularJS: Display blob (.pdf) in an angular app但它对我不起作用.
我的控制器
angular.module('EvaluationResultsModule').controller('CA_EvaluationResultsCtrl',[ '$scope','EvaluationResultsService','$sce',function($scope,EvaluationResultsService,$sce) {
$scope.showPDF = function() {
$scope.result = CA_EvaluationResultsService.getEvalutaionResultPDF($scope.evaluationResults);
$scope.result.$promise.then(function(data) {
var file = new Blob([data],{
type : 'application/pdf'
});
var fileURL = URL.createObjectURL(file);
$scope.pdfContent = $sce.trustAsResourceUrl(fileURL);
});
}
} ]);
我的服务
angular.module('EvaluationResultsModule').factory('EvaluationResultsService',function($resource) {
return $resource('./api/ca/evaluationResults/:dest',{},{
getEvalutaionResultPDF : {
method : 'GET',params : {
dest : "getPDF"
},responseType : 'arraybuffer',}
});
});
休息控制器方法
@RequestMapping(value = "/getPDF",method = RequestMethod.GET)
public byte[] getEvalutaionResultPDF() {
ByteArrayOutputStream baos = new ByteArrayOutputStream();
// Generate PDF using Jasper
Map<String,Object> model = new HashMap<String,Object>();
List<User> usersList = null; //populated from Service layer;
JRBeanCollectionDataSource beanColDataSource = new JRBeanCollectionDataSource(usersList);
JasperPrint jasperPrint = jasperPrint = JasperFillManager.fillReport(this.getClass().getClassLoader().getResourceAsStream("A4.jasper"),model,beanColDataSource);
JasperExportManager.exportReportToPdfStream(jasperPrint,baos);
return baos.toByteArray();
}
我的回复记录在控制台中
response: Object {data: ArrayBuffer,status: 200,headers: function,config: Object,statusText: "OK"}config: Objectdata: ArrayBufferbyteLength: (...)__proto__: ArrayBufferbyteLength: [Exception: TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #<ArrayBuffer>]get byteLength: function byteLength() { [native code] }constructor: function ArrayBuffer() { [native code] }slice: function slice() { [native code] }__proto__: Objectheaders: function (name) {resource: Resourcestatus: 200statusText: "OK"__proto__: Object
我使用此代码,它适用于我：
REST控制器：
@RequestMapping(value = "/api/reports/pdf",method = RequestMethod.GET)
@Timed
public @ResponseBody byte[] getOpenedEventsInPdf(HttpServletResponse response) {
response.setHeader("Content-Disposition","inline; filename=file.pdf");
response.setContentType("application/pdf");
// get file in bytearray from my custom service in backend
byte[] file = jasperReportsService.getOpenedEventsReport(ReportFormat.PDF);
return file;
}
JS /角度控制器;
$scope.getPdf = function(){
$http.get('/api/reports/pdf',{responseType: 'arraybuffer'})
.success(function (data) {
var file = new Blob([data],{type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
});
}
HTML片段：
<a ng-click="getPdf()">Show PDF</a>
