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

查看:25
本文介绍了AngularJS $http-post - 将二进制文件转换为 excel 文件并下载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在 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 来完成.注意 responseTypesuccess 承诺中的代码.

$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) {//上传失败});

它有一些问题,比如:

  1. 它不支持 .它为 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 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆