AngularJS $ http-post - 将二进制转换为excel文件并下载 [英] AngularJS $http-post - convert binary to excel file and download

问题描述

我在Angular JS中创建了一个应用程序，可以通过$ http post来下载Excel工作簿。

在下面的代码中，我以表单的形式传递信息的JSON，并通过角度$ http post将其发送到服务器REST Web服务（java）。 Web服务使用JSON中的信息，并生成Excel工作簿。在$ http post的成功机构的回复中，我正在获取数据变量中的二进制数据，但不知道如何转换它并作为Excel文件下载。

任何人都可以告诉我一些解决方案，将二进制文件转换为Excel文件并下载？

我的代码如同以下：

  $ http（{
 url：'myweb.com/myrestService'，
方法： POST，
 data：json，//这是你的json数据字符串
标头：{
'Content-type'：'application / json'
} 
}）。success（function（data，status，headers，config）{
 
 //这里我在'data'中获取excel表二进制数据
 
}） .error（function（data，status，headers，config）{
 
}）; 
  

解决方案

只是注意到你不能使用它，因为IE8 / 9但是我会推送提交...也许有人认为它有用

这实际上可以通过浏览器完成，使用 blob 。请注意 responseType 和成功中的代码承诺。

  $ http（{
 url：'你/ webservice'，
方法：POST，
 data：json，//这是你的json data string 
 headers：{
'Content-type'：'application / json'
}，
 responseType：'arraybuffer'
}）。 （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 
 }）; 
  

它有一些问题，虽然如下：

1. 它不支持。它为 saveAs 提供了一个跨浏览器实现，它应该替换上述 success c> success中的一些代码。 / p>
   

   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 the responseType and the code in the success 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:

   1. It doesn't support IE 8 and 9:
   2. It opens a pop up window to open the objectUrl which people might have blocked
   3. 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 the success promise above.

   这篇关于AngularJS $ http-post - 将二进制转换为excel文件并下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！