javascript - 在angularjs中将ng-grid数据导出为CSV和PDF格式

Question

请帮助我....有任何插件..？

我搜索了在 angularjs 中导出 excel 和 PDF。使用 ng-grid。

在angularjs中将ng-grid数据导出为CSV和PDF格式

Answer 1

对于 csv 导出，您可以在此处找到ngGridCsvExportPlugin 只是在脚本的引用处，并将 ngGridCsvExportPlugin 添加到 gridOptions （并通过将showFooter : true添加到 gridOption 来激活页脚）

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

可以在此处找到一个基本的 plunker，您可以在其中看到它

Answer 2

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

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

Answer 3

如果您能够在 Angular 之外做一些事情，您可以使用https://github.com/Ziv-Barber/officegen获取 excel。请参阅此处https://stackoverflow.com/questions/18476921/angularjs-generating-a-pdf-client-side获取 pdf。

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 plugin-for-jsPDF 非常有用。

将其包含在您的html：

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

在 中，使用 jsPDF-AutoTable 插件controller将数据从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 存储库}

Answer 5

这次聚会很晚了，但我写了一个适合我的 PDF 输出。有一个plunker，它可以作为ng-grid V2 的插件使用，但看起来他们没有将它带入 V3（但我只是快速浏览了一下，所以我可能错了）。