Question

我正在开发角度js应用程序，我陷入了一种情况，我必须使用角度js将数据导出到Xls。我在互联网上搜索了很多出口功能或任何角度js的库，所以我可以做到这一点，或者至少我可以了解如何导出。我没有任何代码或工作要在这里展示。

我需要建议。请帮帮我。

提前致谢。

更新

我有一个数据是一个对象数组，我在表中的UI上迭代它。我的后端是node.js，前端是角js。

我的问题是，如果我们从服务器获取数据并且我在UI上使用，我如何使用相同的数据使用angular js导出到Xls。我不想再在后端拨打电话来提取数据并导出数据。

在现有表中，用户可以选中复选框（任意行数或所有行）以将数据提取到Xls。

在node.js中，我使用了名为：Excel的节点模块，它在nodemodules网站上可用。

我的数据是这样的：

"data": [
    {
        "Name": "ANC101",
        "Date": "10/02/2014",
        "Terms": ["samsung", "nokia": "apple"]
    },{
        "Name": "ABC102",
        "Date": "10/02/2014",
        "Terms": ["motrolla", "nokia": "iPhone"]
    }
]

我想要使用angularjs或任何angularjs库的解决方案。

Answer 1

一种廉价的方法是使用Angular生成<table>并使用FileSaver.js将表格输出为.xls文件供用户下载。 Excel将能够以电子表格形式打开HTML表格。

<div id="exportable">
    <table width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>DoB</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td>{{item.dob | date:'MM/dd/yy'}}</td>
            </tr>
        </tbody>
    </table>
</div>

出口电话：

var blob = new Blob([document.getElementById('exportable').innerHTML], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    saveAs(blob, "Report.xls");
};

演示：http://jsfiddle.net/TheSharpieOne/XNVj3/1/

使用复选框功能和问题数据更新了演示。演示：http://jsfiddle.net/TheSharpieOne/XNVj3/3/

Answer 2

您可以尝试Alasql JavaScript库，它可以与XLSX.js库一起使用，以便轻松导出Angular.js数据。这是带有exportData（）函数的控制器示例：

function myCtrl($scope) {
  $scope.exportData = function () {
    alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]);
  };

  $scope.items = [{
    name: "John Smith",
    email: "j.smith@example.com",
    dob: "1985-10-10"
  }, {
    name: "Jane Smith",
    email: "jane.smith@example.com",
    dob: "1988-12-22"
  }];
}

在jsFiddle中查看this example的完整HTML和JavaScript代码。

更新另一个example with coloring cells。

此外，您还需要包含两个库：

Answer 3

当我需要类似的东西时，ng-csv和其他解决方案在这里并没有完全帮助。我的数据在$ scope中，并且没有表格显示它。因此，我构建了一个指令，使用Sheet.js（xslsx.js）和FileSaver.js将给定数据导出到Excel。

Here is my solution packed.

例如，数据是：

$scope.jsonToExport = [
    {
      "col1data": "1",
      "col2data": "Fight Club",
      "col3data": "Brad Pitt"
    },
    {
      "col1data": "2",
      "col2data": "Matrix Series",
      "col3data": "Keanu Reeves"
    },
    {
      "col1data": "3",
      "col2data": "V for Vendetta",
      "col3data": "Hugo Weaving"
    }
];

我必须在我的控制器中为我的指令准备数据数组：

$scope.exportData = [];
// Headers:
$scope.exportData.push(["#", "Movie", "Actor"]);
// Data:
angular.forEach($scope.jsonToExport, function(value, key) {
  $scope.exportData.push([value.col1data, value.col2data, value.col3data]);
});

最后，将指令添加到我的模板中。它显示一个按钮。（见the fiddle）。

<div excel-export export-data="exportData" file-name="{{fileName}}"></div>

Answer 4

如果将数据加载到ng-grid中，则可以使用CSV导出插件。该插件在href标记内创建一个网格数据为csv的按钮。

http://angular-ui.github.io/ng-grid/

https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-csv-export.js

在重命名库时更新链接：

Github链接： https://github.com/angular-ui/ui-grid

图书馆页面：http://ui-grid.info/

有关csv导出的文档：http://ui-grid.info/docs/#/tutorial/206_exporting_data

Answer 5

一个起点可能是使用此指令（ng-csv）只需将文件下载为csv，这是excel可以理解的内容

http://ngmodules.org/modules/ng-csv

也许您可以调整此代码（更新后的链接）：

http://jsfiddle.net/Sourabh_/5ups6z84/2/

看起来似乎是XMLSS（它在打开文件之前会发出警告，如果你选择打开它会正确打开文件）

var tableToExcel = (function() {

  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 function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
  }
})()

Answer 6

使用自定义文件名尝试以下内容：

$scope.exportData= function(){                  
    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]; }) }

          var table = document.getElementById("searchResult");
          var filters = $('.ng-table-filters').remove();
          var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
          $('.ng-table-sort-header').after(filters) ;          
          var url = uri + base64(format(template, ctx));
          var a = document.createElement('a');
          a.href = url;
          a.download = 'Exported_Table.xls';
          a.click();        
};

Answer 7

$scope.ExportExcel= function () { //function define in html tag                          

                        //export to excel file
                        var tab_text = '<table border="1px" style="font-size:20px" ">';
                        var textRange;
                        var j = 0;
                        var tab = document.getElementById('TableExcel'); // id of table
                        var lines = tab.rows.length;

                        // the first headline of the table
                        if (lines > 0) {
                            tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
                        }

                        // table data lines, loop starting from 1
                        for (j = 1 ; j < lines; j++) {
                            tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>";                                
                        }

                        tab_text = tab_text + "</table>";
                        tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");          //remove if u want links in your table
                        tab_text = tab_text.replace(/<img[^>]*>/gi, "");             // remove if u want images in your table
                        tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

                        // console.log(tab_text); // aktivate so see the result (press F12 in browser)               
                        var fileName = 'report.xls'                            
                        var exceldata = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" }) 

                        if (window.navigator.msSaveBlob) { // IE 10+
                            window.navigator.msSaveOrOpenBlob(exceldata, fileName);
                            //$scope.DataNullEventDetails = true;
                        } else {
                            var link = document.createElement('a'); //create link download file
                            link.href = window.URL.createObjectURL(exceldata); // set url for link download
                            link.setAttribute('download', fileName); //set attribute for link created
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        }

                    }

        //html of button

Answer 8

我遇到了这个问题，我制作了一个将HTML表导出为CSV文件的工具。我使用FileSaver.js的问题是这个工具用html格式抓取表格，这就是为什么有些人无法在excel或google中打开文件的原因。您所要做的就是导出js文件然后调用该函数。如果有人遇到同样的问题，这就是github网址https://github.com/snake404/tableToCSV。

Answer 9

我们需要一个JSON文件，该文件需要在angularjs控制器中导出，并且应该能够从HTML文件中调用。我们将同时研究两者。但是在开始之前，我们需要首先在角度库中添加两个文件。这两个文件是json-export-excel.js和filesaver.js。此外，我们需要在角度模块中包括相关性。因此，前两个步骤可以总结如下-

1）在您的角度库中添加json-export.js和filesaver.js。

2）在您的angular模块中包括ngJsonExportExcel的依赖项。

      var myapp = angular.module('myapp', ['ngJsonExportExcel'])

现在我们已经包含了必要的文件，我们可以继续进行HTML文件和控制器中需要进行的更改。我们假定手动或通过调用后端在控制器上创建json。

HTML：

Current Page as Excel
All Pages as Excel

在我工作的应用程序中，我从后端带来了分页的结果。因此，我有两种选择可以导出到excel。一个用于当前页面，另一个用于所有数据。一旦用户选择了一个选项，就会有一个呼叫转到准备json（列表）的控制器。列表中的每个对象在Excel中形成一行。

更多信息，请访问-https://www.oodlestechnologies.com/blogs/Export-to-excel-using-AngularJS

使用angularjs导出到xls

9 个答案: