Question

我创建了一个角度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控制器

$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

Answer 2

我创造了一种更有棱角的方式解决方案。如果要与服务器信息同步，服务器必须提供内容类型和内容处置，尽管您可以手动添加类型和下载属性。

NSDate

AngularJS - 通过AJAX下载文件

2 个答案:

服务器端

客户端