AngularJS-通过AJAX下载文件 [英] AngularJS - File Download through AJAX

问题描述

我创建了一个有角度的js程序，用于从服务器下载文件，遵循代码

I created an angular js program for downloading a file from the server here follows the code

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无法正确重定向.是否可以解决此问题?还是有其他替代方法可以解决此问题?

Here what i am doing is when a user click on the EXPORT AS CSV link the function exportCSVBulk fires and from that function the url value (fullListUrl) sets. But this is an ajax request, so when a user click on the link the url, the response time become little bit long which results the url will not redirected properly. Is it possible to fix this problem? or is there is any alternative way to fix this?

推荐答案

通过Ajax下载.pdf，.xls，.xlsx等文件时，我也遇到了类似的问题.

I have faced the similar issue for downloading files such as .pdf, .xls, .xlsx etc through Ajax.

这是一个事实，即使我想出了一种通过Ajax下载文件的解决方案，我们也无法通过Ajax下载文件.

Its a fact that we cant download files through Ajax, even though i came up with a solution which downloads files through Ajax like.

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

You can use jquery.fileDownload - A jQuery File Download Plugin for Ajax like, feature rich file downloads.

演示工作

Demo Working

我在服务器端使用Spring

I am using Spring at the server side

@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

Client Side

At the client side, I am using 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

Download Link - jquery.fileDownload.js

这篇关于AngularJS-通过AJAX下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！