java - AngularJS - 通过 AJAX 下载文件

Question

我创建了一个 angular js 程序，用于从这里的服务器下载文件，代码如下

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 Controller

$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 链接时，响应时间会变得有点长，导致 url 无法正确重定向。有可能解决这个问题吗？还是有其他方法可以解决这个问题？

Answer 1

我在通过 Ajax 下载 .pdf、.xls、.xlsx 等文件时遇到过类似的问题。

我们无法通过 Ajax 下载文件，这是事实，尽管我想出了一个解决方案，可以通过 Ajax 下载文件。

您可以使用 jquery.fileDownload - 类似 Ajax 的 jQuery 文件下载插件，具有丰富的文件下载功能。

Demo Working

服务器端

我在服务器端使用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