- AngularJS - 下载pdf

试图用Angular下载pdf文档,我们写了这个:


var _config = { headers : {'Accept' : '*/*'},


 responseType : 'arraybuffer'


 };



var success = function(data, status, header, config) {


 $log.debug('Download resume success - type:' + typeof (data));


 var _contentType = (header('Content-Type'));


 var blob = new Blob([ data ], { type : _contentType });


 var url = (window.URL || window.webkitURL).createObjectURL(blob);


 var anchor = angular.element('<a/>');


 anchor.attr({


 href : url,


 target : '_blank',


 download : _fileName


 })[0].click();


}


$http.get(_url, _config).success(success).error(error);



我们已经尝试了blob和arraybuffer的所有排列,但是数据总是以字符串形式返回,扩展字符被"解码",也就是说被破坏了。

虽然我们尝试将它强制为application/octet-stream,但是,_contentType始终是application/pdf

欢迎建议和指点!

时间:

几个月前我自己遇到了这个问题,我必须用FileSaver.js来处理它。

安装FileSaver.js后,成功了的函数如下所示:


function success(response) {


 var blob = new Blob([response.data], { type: "application/pdf"});


 //change download.pdf to the name of whatever you want your file to be


 saveAs(blob, "download.pdf");


}



只需从你的html中更改:


<a target="_self" href="example.com/uploads/file.pdf" download="file_new_name.pdf">



使用你的api检查编码,在这一行中,这对我有用:


 var filepdf = Base64.encode(response.data);


 $scope.filepdf = 'data:application/pdf;base64,' + pdfdata;



控制器


 $scope.pdfDownloads = function() {


 DownloadPath.get({id: $rootScope.user.account_id}, function (data) {


 $scope.createtext = "Download PDF file";


 $scope.download_pdf_filename = data.filename;


 $scope.getPdf = true;


 $scope.download_dir = file_url;



 $http.get($scope.download_dir).then(function (response) {


 var pdfdata= Base64.encode(response.data);


 $scope.pdfdata= 'data:application/pdf;base64,' + pdfdata;


 $('#pdfanchor').attr({


 href: $scope.pdfdata,


 download: $scope.download_pdf_filename


 })


 }); 


 });


 };



HTML


<a href=""ng-click="pdfDownloads()" >Download</a>



编辑:这就是我们构造响应(php函数)的方式


contentType = 'application/octet-stream';


contentDescription = 'File Transfer';


contentDisposition = 'attachment; filename=' . basename(file_nae);


expires = 0;


cacheControl = 'must-revalidate';


contentLength = filesize($file_name);


body = base64_encode(file_get_contents($file_name));



你需要告诉angularjs你在$http.get$http.post方法中接收了一个二进制文件,使用{responseType :'arraybuffer'}

例如:


$http.post('/pdf/link', requestData, { responseType : 'arraybuffer' }).then(function (data, status, headers) {



 headers = data.headers();


 var contentType = headers['content-type'];


 var linkElement = document.createElement('a');



 try {


 var blob = new Blob([data.data], {type: "application/pdf"});


 var url = window.URL.createObjectURL(blob);



 linkElement.setAttribute('href', url);



 linkElement.setAttribute("download", "mypdf.pdf");



 var clickEvent = new MouseEvent("click", {


 "view": window,


 "bubbles": true,


 "cancelable": false


 });



 linkElement.dispatchEvent(clickEvent);


 } catch (ex) {


 console.log(ex);


 }


 }



...