AngularJS - 通过 AJAX 下载文件

Question

我创建了一个AngularJS程序，用于从服务器下载文件，以下是代码：

HTML代码

<a download="fullList.csv" ng-href="{{ fullListUrl }}" type="button" class="btn btn-success btn-xs exec-batch"  ng-click="exportCSVBulk(batchExec)">
          <span class="glyphicon glyphicon-ok"></span> EXPORT AS CSV
</a>

AngularJS控制器

$scope.exportCSVBulk=function(){
 var page = "../importExportService/exportBulkCSV/"+batchExec.id;
 $http.get(page).success(function(response) {
 $scope.fullListUrl = 'data:text/csv;charset=utf-8,' + escape(response); 
});
}

当用户点击“EXPORT AS CSV”链接时，我正在执行的操作是触发函数exportCSVBulk，并从该函数设置url值（fullListUrl）。但这是一个ajax请求，所以当用户点击链接时，响应时间变得有点长，导致url无法正确重定向。有没有办法解决这个问题？或者有没有其他替代方法来解决这个问题？

- Anish Antony

---

最简单的方法是不使用AJAX发出请求。只需删除您的 ng-click 属性，依赖于浏览器处理下载即可。 - Ben Foster

你在服务器端使用Java吗？（例如Spring控制器或Jersey Rest服务等） - Nidhish Krishnan

@BenFoster，我在这里做了一个小改动。我需要参数（batchExec）来从URL获取内容。此外，这个a href被放置在表格行中，所以参数将在onclick上决定。 - Anish Antony

@AnishAntony，请看一下我的回答... - Nidhish Krishnan

@AnishAntony 当然可以…… - Nidhish Krishnan

Answer 1

我曾经遇到过通过Ajax下载文件（如.pdf、.xls、.xlsx等）的类似问题。

事实上，我们无法通过Ajax下载文件，但我找到了一个解决方案，可以通过Ajax下载文件。

您可以使用jquery.fileDownload - 一个jQuery文件下载插件，可以实现功能丰富的文件下载。

演示效果

服务器端

我在服务器端使用Spring框架。

@RequestMapping(value = "exportXLS", method = RequestMethod.POST, produces = APP_JSON)
@ResponseBody
public void getCSV(final HttpServletResponse response, @RequestParam(value = "empId", required = true) final String empId) throws IOException, Exception
{
    final byte[] csv = ExportXLSUtil.getFileBytes(empId); // get the file bytes
    final OutputStream output = getOutputStream(response);
    response.setHeader("Content-Disposition", "attachment; filename=documents_" + new DateTime() + ".xls");
    response.setContentType(CONTENT_TYPE);
    response.setContentLength(csv.length);
    write(output, csv);
}

客户端

在客户端，我使用AngularJS

$downloadXLS = function(id)
{
    $.fileDownload('/user/exportXLS', 
    {
        httpMethod : "POST",
        data : {
            empId : id
        }
    }).done(function(e, response)
    {
     // success
    }).fail(function(e, response)
    {
     // failure
    });
}

下载链接 - jquery.fileDownload.js

- Nidhish Krishnan

Answer 2

我创建了一种更加Angular的解决方案。如果您想要与服务器信息同步，服务器必须提供content-type和content-disposition，尽管您也可以手动添加type和download属性。

 vm.export = function () {
            //PopUps.showLoading()
            $http.get(Url).then(function (result) {
                //PopUps.hideLoading()
                var headers = result.headers()
                var blob = new Blob([result.data], { type: headers['content-type'] })
                var windowUrl = (window.URL || window.webkitURL)
                var downloadUrl = windowUrl.createObjectURL(blob)
                var anchor = document.createElement("a")
                anchor.href = downloadUrl
                var fileNamePattern = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
                anchor.download = fileNamePattern.exec(headers['content-disposition'])[1]
                document.body.appendChild(anchor)
                anchor.click()
                windowUrl.revokeObjectURL(blob)
            })
        }

- Jhonattan