AngularJS $http-post - 将二进制文件转换为 excel 文件并下载 [英] AngularJS $http-post - convert binary to excel file and download
问题描述
我在 Angular JS 中创建了一个应用程序,用于通过 $http 帖子下载 Excel 工作簿.
在下面的代码中,我以 JSON 的形式传递信息,并通过有角度的 $http 帖子将其发送到服务器 REST Web 服务 (java).Web 服务使用来自 JSON 的信息并生成 Excel 工作簿.在 $http 帖子的成功正文中的响应中,我在 data 变量中获取二进制数据,但不知道如何转换它并下载为 Excel 文件.
谁能告诉我一些将二进制文件转换为 Excel 文件并下载的解决方案?
我的代码如下:
$http({网址:'myweb.com/myrestService',方法:POST",data: json,//这是你的json数据串标题:{'内容类型':'应用程序/json'}}).成功(功能(数据,状态,标题,配置){//这里我在'data'中获取excel表二进制数据}).error(function (data, status, headers, config) {});
刚刚注意到你因为 IE8/9 而不能使用它,但我还是会推送提交......也许有人觉得它有用
这实际上可以通过浏览器使用 blob
来完成.注意 responseType
和 success
承诺中的代码.
$http({url: '你的/网络服务',方法:POST",data: json,//这是你的json数据串标题:{'内容类型':'应用程序/json'},响应类型:'数组缓冲区'}).成功(功能(数据,状态,标题,配置){var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});var objectUrl = URL.createObjectURL(blob);window.open(objectUrl);}).error(function (data, status, headers, config) {//上传失败});
它有一些问题,比如:
- 它不支持 .它为
saveAs
提供了一个跨浏览器的实现,它应该替换上面success
承诺中的一些代码.I've created an application in Angular JS for downloading an Excel workbook through $http post.
In the below code I'm passing the information in the form of JSON , and send it to the server REST web service (java) through an angular $http post. The web service uses the information from the JSON and produces an Excel workbook. In the response within the success body of $http post, I'm getting binary data within that data variable, but don't know how to convert it and download as an Excel file.
Can anyone please tell me some solution for this for converting the binary to Excel file and download?
My code is as given below:
$http({ url: 'myweb.com/myrestService', method: "POST", data: json, //this is your json data string headers: { 'Content-type': 'application/json' } }).success(function (data, status, headers, config) { // Here i'm getting excel sheet binary datas in 'data' }).error(function (data, status, headers, config) { });
解决方案Just noticed you can't use it because of IE8/9 but I'll push submit anyway... maybe someone finds it useful
This can actually be done through the browser, using
blob
. Notice theresponseType
and the code in thesuccess
promise.$http({ url: 'your/webservice', method: "POST", data: json, //this is your json data string headers: { 'Content-type': 'application/json' }, responseType: 'arraybuffer' }).success(function (data, status, headers, config) { var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); var objectUrl = URL.createObjectURL(blob); window.open(objectUrl); }).error(function (data, status, headers, config) { //upload failed });
There are some problems with it though like:
- It doesn't support IE 8 and 9:
- It opens a pop up window to open the
objectUrl
which people might have blocked - Generates weird filenames
It did work!
The server side code in PHP I tested this with looks like this. I'm sure you can set similar headers in Java:
$file = "file.xlsx"; header('Content-disposition: attachment; filename='.$file); header('Content-Length: ' . filesize($file)); header('Content-Transfer-Encoding: binary'); header('Cache-Control: must-revalidate'); header('Pragma: public'); echo json_encode(readfile($file));
Edit 20.04.2016
Browsers are making it harder to save data this way. One good option is to use filesaver.js. It provides a cross browser implementation for
saveAs
, and it should replace some of the code in thesuccess
promise above.这篇关于AngularJS $http-post - 将二进制文件转换为 excel 文件并下载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!