javascript - 将 HTML 表导出到 Excel 不使用 C# 下载文件

Question

我正在创建一个 Umbraco 网站，我正在为 Umbraco 的后端创建一个插件，以便用户可以从 HTML 表格导出 Excel 工作表。 我正在使用 AngularJS 和 C# Controller 来执行此操作。这是我的文件。

//This is my C# Controller at /App_Code/ExportBlankDictionaryController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Umbraco.Web.Editors;
using Umbraco.Core.Persistence;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.IO;

namespace AngularUmbracoPackage.App_Code
{
    [Umbraco.Web.Mvc.PluginController("AngularUmbracoPackage")]
    public class ExportBlankDictionaryController : UmbracoAuthorizedJsonController
    {
        //[System.Web.Http.AcceptVerbs("GET", "POST")]
        //[System.Web.Http.HttpGet]
        public void ExportExcell()
        {
            var keys = new System.Data.DataTable("BlankDictionaryItems");
            keys.Columns.Add("Keys", typeof(string));
            keys.Columns.Add("Description", typeof(string));

            keys.Rows.Add("Enter First Dictionary Name Here", " ");

            var grid = new GridView();
            grid.DataSource = keys;
            grid.DataBind();

            HttpContext.Current.Response.ClearContent();
            HttpContext.Current.Response.BufferOutput = true;
            HttpContext.Current.Response.AddHeader("Content-disposition", "attachment; filename=BlankDictionaryItems.xls");
            HttpContext.Current.Response.ContentType = "application/vnd.ms-excel";

            HttpContext.Current.Response.Charset = "";
            StringWriter sw = new StringWriter();
            HtmlTextWriter htw = new HtmlTextWriter(sw);

            grid.RenderControl(htw);

            HttpContext.Current.Response.Output.Write(sw.ToString());
            HttpContext.Current.Response.Flush();
            HttpContext.Current.Response.End();
        }
    }
}

// This is my AngularJS controller at /App_Plugins/datatable/datatable.controller.js:

angular.module("umbraco")
    .controller("AngularUmbracoPackage.ExportBlankDictionaryController", function ($scope, keyResource) {
        keyResource.exportToExcell().then(function (response) {
            alert("Table Generated!");
        })
    });

这是我在同一目录中的 datatable.resource.js 文件:

// Adds the resource to umbraco.resources module:
angular.module('umbraco.resources').factory('keyResource',
    function ($q, $http) {
        // The factory object returned
        return {
            // This calls the API controller we setup earlier
            exportToExcell: function () {
                console.log("button clicked");
                return $http.post("backoffice/AngularUmbracoPackage/ExportBlankDictionary/ExportExcell");
            }
        };
    }
);

如有必要，这里是 package.manifest.json 文件:

{
    propertyEditors:[
    {
        name: "DataTable editor",
        alias: "my.datatable.editor",
        editor:{
            view: "~/app_plugins/datatable/table.html",
            valueType: "JSON"
        }
    }
    ],
    javascript: [
    "~/app_plugins/datatable/datatable.controller.js",
    "~/app_plugins/datatable/datatable.resource.js"
    ]
}

这是 View 的 table.html 文件:

<div class="ExportDiv" ng-controller="AngularUmbracoPackage.ExportBlankDictionaryController">
    <table id="table1" class="table table-bordered" runat="server">
        <thead>
            <tr>
                <th>Key</th>
                <th>Populate Dictionary Item Names in Key Column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Enter First Dictionary Name Here</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

<button class="btn btn-success" ng-click="exportToExcel()">Export Table</button>

好的，Umbraco 页面正在加载，当 Backoffice 的开发人员部分打开时会出现警告框，但是当我单击 Export Table 按钮时，没有任何反应。单击此按钮时，我试图获取要下载的 Excel 工作表。我怎样才能做到这一点？我错过了什么吗？

Answer 1

添加

angular.module("umbraco")
    .controller("AngularUmbracoPackage.ButtonController", function ($scope, keyResource) {
        $scope.ButtonClickHandler = function(){
             console.log("clicked me!");
             keyResource.exportToExcell().then(function (response) {
             //do something with the response from the server
        }
    });

然后将按钮元素更改为:

<button ng-controller="AngularUmbracoPackage.ButtonController" class="btn btn-success" ng-click="ButtonClickHandler()">Export Table</button>