使用 angularjs 导出到 xls

IT技术 javascript excel angularjs xls
2021-01-24 06:05:17

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

我需要建议。请帮我解决这个问题。

提前致谢。

更新：

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

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

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

在 node.js 中，我使用了名称为 Excel 的节点module，它可以在 nodemodules 站点上找到。

我的数据是这样的：

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

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

6个回答

一种廉价的方法是使用 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/

@fischermatte：您无法在此解决方案中解决该问题，因为这正是您所做的。让 Excel 打开带有错误扩展名的 html 文件。Excel 足以将其显示在表格中，但它不是一个干净的解决方案。
2021-03-19 06:05:17
生成后无法使用该文件。也许需要更改声明的文件类型。
2021-03-20 06:05:17
为什么我们需要 .xls，为什么不只是 .csv？？
2021-03-29 06:05:17
使用 Office 2013，您将收到警告：“文件格式和扩展名不匹配...文件可能已损坏...”。知道如何解决这个问题吗？
2021-03-30 06:05:17
这不是正确的解决方案，如果我们在不使用内联的情况下向表格添加样式，则它不起作用。
2021-04-01 06:05:17

您可以尝试使用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 中查看此示例的完整 HTML 和 JavaScript 代码。

更新另一个带有着色单元格的示例。

您还需要包含两个库：

jsFiddler 中的示例生成一个空的 .xlsx 文件。这是你能解决的问题吗？请在发布前测试。
2021-03-17 06:05:17
@agershun 感谢回复，真的很好。我认为所有的 css 都没有反映在这里。我在 ubuntu 上工作，我有 libre 办公室，其中只有标题为粗体，其他 css 不起作用。有什么解决办法吗？？这可以在 microsoft office 2013 或更高版本上运行吗？
2021-03-30 06:05:17
感谢这篇非常有用的帖子，为什么我需要包含 XLsx.core.min.js 它似乎没有它就可以工作？@agershun
2021-03-30 06:05:17
@amitkumar12788 现在 AlaSQL 支持单元格中的 CSS 样式属性。请参见示例：jsfiddle.net/agershun/95j0txwx/2
2021-04-11 06:05:17
我怎样才能给标题一些 css？像粗体和彩色标题和标题下方的一条空白彩色线？
2021-04-14 06:05:17

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

这是我打包的解决方案。

例如，数据为：

$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]);
});

最后，向我的模板添加指令。它显示一个按钮。（见小提琴）。

<div excel-export export-data="exportData" file-name="{{fileName}}"></div>
我很高兴它对你有帮助。如果您发现更好的，请发表评论。;)
2021-03-16 06:05:17
像魅力一样工作，谢谢，现在深入研究并尝试理解它:) 我需要弄清楚为什么 jszip 是必要的
2021-04-05 06:05:17
奇迹般有效！！谢谢！！
2021-04-07 06:05:17

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

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

一个起点可能是使用此指令（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))
  }
})()
@Braulio 我也在使用相同的代码，但它在 IE 和 Firefox 中不起作用帮助如何解决
2021-03-23 06:05:17
更新了 jsfiddle 链接
2021-03-27 06:05:17
另一个关于 csv / excel 和 angularjs 的好链接 angularjs4u.com/modules/ ...
2021-04-03 06:05:17
其它你可能感兴趣的问题
上一篇Javascript查找json值 下一篇将画布转换为 PDF