大型json字符串下载失败-Angular JS答案

【问题标题】：Download fails for large json string -Angular JS大型json字符串下载失败-Angular JS
【发布时间】：2014-03-14 05:01:09
【问题描述】：

我已经为文件下载编写了一个 Angular 应用程序，该应用程序仅适用于小 json 字符串，但对于大字符串下载失败。谁能告诉我一些解决方案。

我正在使用 REST 网络服务

 var json = _.getJson(); // here json value object be received from a script function 
 var myURL = 'rest/myMethod?jsonValue=' + JSON.stringify(json);
  _.downloadFile(myURL);

downloadFile 方法：

downloadFile: function(URL)
{
    $.fileDownload(URL).done(function(e, response)
    {
      console.log('download success');
    }).fail(function(e, response)
    {
      console.log('fail');
    });
}

【问题讨论】：

失败怎么办？有什么错误吗？只是挂起？电脑爆炸了？
您是否将 JSON 附加到 URL？ URL 最多只能包含大约 2000 个字符（取决于浏览器）。
@Jorg 那么我将如何将这么大的 json 字符串发送到服务器
一般作为POST数据发送。 Angular 的 $http 注入器也有这方面的作用

标签： javascript json angularjs

【解决方案1】：

根据 cmets，以下是使用 Angular 进行 POST 的方法。我在这里只能给你一个例子。标头可能取决于角度版本等。

function TestController($scope, $http) {
    $http({
        url: 'yourwebsite',
        method: "POST",
        data: json, //this is your json data string
        headers: {
           'Content-type': 'application/json'
        }
    }).success(function (data, status, headers, config) {
        //upload succesfull. maybe update scope with a message?
    }).error(function (data, status, headers, config) {
        //upload failed
    });

}

【讨论】：

那么我如何使用 $.fileDownload 下载文件
您无法下载网址。您的 cmets 提到“发送到服务器”，这就是我所展示的。我不完全确定您的 xhr 请求试图实现什么。您是否将其发送到服务器以生成文件？
实际上我正在将 json 发送到服务器，服务器将根据 json 数据生成一个 excel，我将通过 $.fileDownload 下载它
您可以发回一个包含 excel 文件位置的 URL，然后在 success 函数中再次使用 $http 或者将整个 excel 作为二进制文件发回，但这完全是一个单独的问题。您可能会在这里找到答案：stackoverflow.com/questions/3599670/…。接受的答案看起来是在演示一个 excel 文件。
哪种服务器端语言？

【解决方案2】：

我看到了两个潜在的问题：

请求 URL 可能太长（请参阅：this discussion）
字符串化的 JSON 在 URL 中包含无效字符

如果 URL 太长，您必须将 jsonValue 移动到请求正文中，而不是将其作为 URL 参数传递。

要解决第二个问题，您需要对字符串化的值进行 URI 编码：

var myURL = 'rest/myMethod?jsonValue=' + encodeURIComponent( JSON.stringify(json) );

顺便说一句，查看失败参数应该首先指出为什么请求失败。

【讨论】：

不幸的是，这不适用于更大的 JSON 文件

【解决方案3】：

这是一个使用 Angular 的 $http 发送 post 请求并从服务器下载 XML 文件的示例。

$http({
            url: '$your_URL_here$', // you should replace $your_URL_here$ by your own url
            method: 'POST',
            responseType: 'arraybuffer',
            data: postJson, //***this is the request json data for post***
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }
        }).success(function(data){
                var blob = new Blob([data], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                });                
                saveAs(blob, $fileName$);// you should replace $fileName$ by your own fileName
            }
        }).error(function(data){
            //Some error handling method here
        });

请注意，您应该导入 FileSaver.js 以保存来自 'arraybuffer' responseType 的文件。

【讨论】：