Question

最好的方法是什么？我有桌子，它的数据来自api。我使用angularJs作为数据。这是我的源代码：

这是我在索引中的表格：

<div style="width:1100px; max-height:480px; overflow:scroll; border-top:1px solid #808080">
                <table class="table">
                    <tr>
                        <th>AdaNo</th>
                        <th>ParselNo</th>
                        <th>CiltNo</th>
                        <th>SayfaNo</th>
                        <th>ZeminTip</th>
                        <th>İl</th>
                        <th>İlçe</th>
                        <th>Mahalle</th>
                        <th>Kurum</th>
                        <th>Alan</th>
                        <th>Pay</th>
                        <th>Nitelik</th>
                        <th>EdinmeSebep</th>
                        <th>Ad</th>
                        <th>SoyAd</th>
                        <th>TcKimlikNo</th>
                        <th>HissePay</th>
                        <th>HissePayda</th>
                    </tr>
                    <tr data-ng-repeat="zemin in Zeminler">
                        <td>{{zemin.AdaNo}}</td>
                        <td>{{zemin.ParselNo}}</td>
                        <td>{{zemin.CiltNo}}</td>
                        <td>{{zemin.SayfaNo}}</td>
                        <td>{{zemin.ZeminTip.Ad}}</td>
                        <td>{{zemin.Il.Ad}}</td>
                        <td>{{zemin.Ilce.Ad}}</td>
                        <td>{{zemin.Mahalle.Ad}}</td>
                        <td>{{zemin.Kurum.Ad}}</td>
                        <td>{{zemin.AnaTasinmaz.Alan}}</td>
                        <td>{{zemin.KatMulkiyeti.ArsaPay}}/{{zemin.KatMulkiyeti.ArsaPayda}}</td>
                        <td>{{zemin.AnaTasinmaz.Nitelik}}</td>
                        <td>{{zemin.Hisseler[0].EdinmeSebep}}</td>
                        <td>{{zemin.Hisseler[0].Kisi.GercekKisi.Ad}}{{zemin.Hisseler[0].Kisi.TuzelKisi.Ad}}</td>
                        <td>{{zemin.Hisseler[0].Kisi.GercekKisi.SoyAd}}</td>
                        <td>{{zemin.Hisseler[0].Kisi.GercekKisi.TcKimlikNo}}</td>
                        <td>{{zemin.Hisseler[0].HissePay}}</td>
                        <td>{{zemin.Hisseler[0].HissePayda}}</td>
                    </tr>
                </table>
            </div>

这是我对这个数据的Apis：

 [Route("api/TapuZeminApi/GetZemins")]
    [HttpPost]
    public string GetZeminsFromZeminArg(object arg)
    {
        ZeminArg zemArg = SConvert.DeserializeJSON<ZeminArg>(arg.ToString());

        List<TapuZeminModel> zeminList = TapuModule.GetZeminListFromArgs(zemArg);

        string jsonResult = SConvert.SerializeJSON(zeminList);
        return jsonResult;
    }

    // GET api/<controller>/5
    public string GetZeminsFromTcNo(long id)
    {
        List<TapuZeminModel> zeminList = TapuModule.GetZeminListFromTcNo(id.ToString());

        string jsonResult = SConvert.SerializeJSON(zeminList);
        return jsonResult;
    }

    public string GetZeminsFromKurumId(long id)
    {
        List<TapuZeminModel> zeminList = TapuModule.GetZeminListKurumId(id);

        string jsonResult = SConvert.SerializeJSON(zeminList);
        return jsonResult;
    }

Article

我在我的解决方案中使用过它：

首先制作了ExportToExcelService.Js：

angular.module('TapuAppModule')
.factory('Excel', function tapuExcelFactory($window) {
    var uri = 'data:application/vnd.ms-excel;base64,',
        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
        base64 = function (s) { return $window.btoa(unescape(encodeURIComponent(s))); },
        format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };
    return {
        tableToExcel: function (tableId, worksheetName) {
            alert('Olcak olcak')
            var table = $(tableId),
                ctx = { worksheet: worksheetName, table: table.html() },
                href = uri + base64(format(template, ctx));
            return href;
        }
    };
})

这里是我的控制器tapuController.js：

$scope.exportToExcel = function (tableId) {
        $scope.exportHref = Excel.tableToExcel(tableId, 'sheet name');
        $timeout(function () { location.href = $scope.fileData.exportHref; }, 100); // trigger download
    };

和我在索引中的按钮：

<button class="btn btn-link" ng-click="exportToExcel('#dataTable')">
                <span class="w-icon-page-excel"></span> Export to Excel
            </button>

当我点击按钮时，我在ExportToExcelService.Js'Olcak Olcak'中收到警报。所以我认为它可以是ExportToExcelService.Js中的触发方法。然后我在Chrome中的控制台上收到了这个错误：

TypeError：无法读取未定义的属性'exportHref'       在tapuController.js：81
      在angular.js：17682
      at completeOutstandingRequest（angular.js：5387）
      在angular.js：5659

为什么我收到此错误？我该怎么办？

Answer 1

尝试通过$ scope.exportHref更改location.href值;没有fileData。

$timeout(function () { location.href = $scope.exportHref; }, 100); // trigger download

对我有用。

如何将表导出到Excel？

1 个答案: