将angular网格数据导出为angularjs中的CSV和PDF格式

Question

请帮助我....任何插件都在那里..？

我已经在angularjs中搜索过excel和PDF。 使用ng-grid。

将angular网格数据导出为angularjs中的CSV和PDF格式

Answer 1

对于csv导出，您可以在此处找到ngGridCsvExportPlugin
只需参考脚本并将ngGridCsvExportPlugin添加到gridOptions
（并通过向gridOption添加showFooter：true来激活页脚）

 $scope.gridOptions = {
        data: 'myData',
        plugins: [new ngGridCsvExportPlugin()],
        showFooter: true,
      };

您可以在这里找到可以在工作中看到它的基本插件

Answer 2

您现在不需要任何外部插件。 ng grid现在调用新版本UI-Grid具有本机支持。 方法名称是csvExport和pdfExport。

http://ui-grid.info/docs/#/tutorial/206_exporting_data

Answer 3

如果你能够做一些角度以外的事情你可以使用https://github.com/Ziv-Barber/officegen for excel。 有关pdf，请参见https://stackoverflow.com/questions/18476921/angularjs-generating-a-pdf-client-side 。

Answer 4

我用过jsPDF 。 这是最简单的。

将其包含在您的html ：

<script src="jspdf.min.js"></script>
<!-- script src="jspdf.debug.js"></script--><!-- for development -->

使用它¹ ：

var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');

并将您的按钮或任何内容绑定到此代码。

---

高级提示

我还发现jsPDF-AutoTable插件-for-jsPDF非常有用。

将其包含在您的html ：

<script src="jspdf.plugin.autotable.js"></script>

在controller ，使用jsPDF-AutoTable插件将数据从ng-grid数据传输到jsPDF。

假设您定义了ng-grid表：

    $scope.gridOptions = {
        data: 'myData',
        columnDefs: [
                {field: 'user', displayName: 'User' /*,...*/ },
                {field: 'email', displayName: 'Email' /*,...*/ },
                {field: 'favoriteShruberry', displayName: 'Favorite Shrubbery' /*,...*/ }
         ]
    };

...然后，在生成pdf的函数中：

    var columns = [];
    var rows = [];

    // copy ng-grid's titles to pdf's table definition:
    var allColumnDefs = $scope.gridOptions.columnDefs;
    for ( var columnIdx in allColumnDefs ) {
        var columnDef = allColumnDefs[columnIdx];
        var newColumnDef = {
                title: columnDef.displayName,
                dataKey: columnDef.field
        };
        columns.push(newColumnDef);
    }

    // copy ng-grid's actual data to pdf's table:       
    var allRecords = $scope.myData;
    for ( var recordIdx in allRecords ) {
        var record = allRecords[recordIdx];
        var newRow = {};
        for ( var columnIdx in allColumnDefs ) {
            var columnDef = allColumnDefs[columnIdx];
            var value = record[columnDef.field];
            if (value !== null) {
                newRow[columnDef.field] = value;
            }
        }
        rows.push(newRow);
    }

    var docName = 'favoriteShrubberies.pdf';
    var pdfStyle = { styles: { overflow: 'linebreak' } } // this handles cells that contain really long text like in this comment, by auto-inserting a
                                                         // line break inside the cell, causing the whole line's height to increase accordingly
    var doc = new jsPDF('p', 'pt'); // currently supports only 'pt'
    doc.autoTable(columns, rows, pdfStyle);
    doc.save(docName);

---

^{1例子直接来自jsPDF GitHub repo}

Answer 5

这个派对很晚，但我写了一个适合我的PDF输出。 有一个plunker ，它可以作为ng-grid的V2的插件 ，但它看起来不像是它已经通过V3（但我只是有一个非常快速的偷看，所以我可能是错的）。