javascript - angularjsでng-gridデータをCSVおよびPDF形式にエクスポートする

Question

助けてください....プラグインはありますか..？

angularjsでExcelとPDFのエクスポートを検索しました。ng グリッドを使用します。

angularjsでng-gridデータをCSVおよびPDF形式にエクスポートする

Answer 1

csv エクスポートの場合は、ここで見つけることができるngGridCsvExportPluginがあります 。スクリプトへの参照で、ngGridCsvExportPlugin を gridOptions に追加します(さらに、 showFooter : trueを gridOptionに追加して、フッターもアクティブにします) 。

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

仕事でそれを見ることができる基本的なプランカーは ここにあります

Answer 2

angularの外で何かを行うことができる場合は、https://github.com/Ziv-Barber/officegenをExcelに使用できます。PDFについては、 https: //stackoverflow.com/questions/18476921/angularjs-generating-a-pdf-client-sideを参照してください。

Answer 3

私は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 プラグインを使用して、data から jsPDF にデータを転送しますcontroller。ng-grid

テーブルを定義すると仮定します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 4

このパーティーには非常に遅れましたが、私に適した PDF 出力を書きました。plunkerがあり、ng-grid の V2 のプラグインとして利用できますが、V3 に取り込まれたようには見えません (ただし、非常に簡単に覗いただけなので、間違っている可能性があります)。