使用 web api 和 angular JS 将数据下载为 Excel 文件

Question

我有一个从 web 应用程序下载文件的场景，它使用 a) Angular JS 作为前端 b) Web api 作为服务器，浏览器是 IE9。

我尝试了很多将 HTML 表格转换为 excel、csv 的插件，但它们都不适用于 IE9。所以我决定在 web api 中生成文件并在客户端下载。但这也不起作用。 任何人都可以分享这个场景的工作示例吗？ Angular JS 代码：

var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, exportToExcelService) {
        $scope.export = function () {
            exportToExcelService.download().success(
                function (response) {

                })
                 .error(function (response, status) {

                 });
        }
    }).

factory('exportToExcelService', function ($http) {
    var sampleAPI = {};
    sampleAPI.download = function () {
        return $http({
            method: 'POST',
            url: 'api/Sample/download'          
        });
    }
    return sampleAPI;
});

Web API 控制器代码：

[HttpPost]
        public HttpResponseMessage download()
        {
            List<Record> obj = new List<Record>();
            obj = RecordInfo();
            StringBuilder str = new StringBuilder();
            str.Append("<table border=`" + "1px" + "`b>");
            str.Append("<tr>");
            str.Append("<td><b><font face=Arial Narrow size=3>FName</font></b></td>");
            str.Append("<td><b><font face=Arial Narrow size=3>LName</font></b></td>");
            str.Append("<td><b><font face=Arial Narrow size=3>Address</font></b></td>");
            str.Append("</tr>");
            foreach (Record val in obj)
            {
                str.Append("<tr>");
                str.Append("<td><font face=Arial Narrow size=" + "14px" + ">" + val.FName.ToString() + "</font></td>");
                str.Append("<td><font face=Arial Narrow size=" + "14px" + ">" + val.LName.ToString() + "</font></td>");
                str.Append("<td><font face=Arial Narrow size=" + "14px" + ">" + val.Address.ToString() + "</font></td>");
                str.Append("</tr>");
            }
            str.Append("</table>");
            HttpResponseMessage result = null;
            // serve the file to the client      
            result = Request.CreateResponse(HttpStatusCode.OK);
            byte[] array = Encoding.ASCII.GetBytes(str.ToString());
            MemoryStream mem = new MemoryStream(array);
            result.Content = new StreamContent(mem);
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.ms-excel");
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = "Data.xls"
            };
            return result;
        }

        public List<Record> RecordInfo()
        {

            List<Record> recordobj = new List<Record>();
            recordobj.Add(new Record { FName = "Smith", LName = "Singh", Address = "Knpur" });
            recordobj.Add(new Record { FName = "John", LName = "Kumar", Address = "Lucknow" });
            recordobj.Add(new Record { FName = "Vikram", LName = "Kapoor", Address = "Delhi" });
            recordobj.Add(new Record { FName = "Tanya", LName = "Shrma", Address = "Banaras" });
            recordobj.Add(new Record { FName = "Malini", LName = "Ahuja", Address = "Gujrat" });
            recordobj.Add(new Record { FName = "Varun", LName = "Katiyar", Address = "Rajasthan" });
            recordobj.Add(new Record { FName = "Arun  ", LName = "Singh", Address = "Jaipur" });
            recordobj.Add(new Record { FName = "Ram", LName = "Kapoor", Address = "Panjab" });
            return recordobj;
        }

Answer 1

我通过使用以下代码找到了解决方案，它就像一个魅力。我们只需要添加 window.location.href。

app.controller('myCtrl', function ($scope, exportToExcelService,$location) {
    $scope.export = function () {
        exportToExcelService.download().success(
            function (response) {                
               window.location.href = 'api/sample/download'
            })
             .error(function (response, status) {
                 var str = 'Hello'
             });
    }
}).