web-dev-qa-db-ja.com

CSV、Excel、PDF形式でデータをエクスポート

CSV、Excelのエクスポートテーブルデータを追加したいPDFアプリのフォーマット機能。

Angularjs 1.2.16を使用してアプリを構築しています。

Excelでデータをエクスポートする

利用した

<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>

次のコードを使用してテーブルをXLS形式にエクスポートするには：

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

上記のコードは正常に動作しています。

CSV、PDFでデータをエクスポート

同じように、CSVおよびPDF形式でデータをエクスポートします。
http://www.directiv.es/ng-csv を使用してCSVでデータをエクスポートしましたが、正常に動作していませんubuntu libre office（ファイルには破損したデータが表示されています）。
CSV、Excel、およびPDF形式）でテーブルデータをエクスポートする方法を教えてください。

javascriptangularjsexcelpdf
17
user sks

Alasql JavaScriptライブラリ XLSX.js を使用して、AngularJSからXLS、XLSX、CSV、およびTAB形式にデータをエクスポートできます。

コードに2つのライブラリを含めます。

データをExcel形式にエクスポートするには、コントローラーコードで関数を作成します。

function myCtrl($scope) {
    $scope.exportData = function () {
       alasql('SELECT * INTO XLSX("mydata.xlsx",{headers:true}) FROM ?',[$scope.items]);
    };
    $scope.items = [{a:1,b:10},{a:2,b:20},{a:3,b:30}];
};

次に、HTMLでボタン（またはその他のリンク）を作成します。

<div ng-controller="myCtrl">
    <button ng-click="exportData()">Export</button>
</div>

JsFiddleで この例 を試してください。

データをCSV形式で保存するには、CSV（）関数を使用します。

alasql("SELECT * INTO CSV('mydata.csv', {headers:true}) FROM ?",[$scope.mydata]);

または、適切なファイル形式にTXT（）、CSV（）、TAB（）、XLS（）、XLSX（）関数を使用します。

14
agershun

CSVファイルに満足している場合は、ngCsvモジュールが最適です。 DOMから要素をロードするのではなく、配列を直接エクスポートします。ここでは、ngCsvの動作のサンプルを見ることができます。

Html：

 <h2>Export {{sample}}</h2>
  <div>
      <button type="button" ng-csv="getArray" filename="test.csv">Export</button>
</div>

そして、js：

angular.module('csv', ['ngCsv']);

function Main($scope) {
    $scope.sample = "Sample";
    $scope.getArray = [{a: 1, b:2}, {a:3, b:4}];                            
}
6
Shrinivas Pai

saveAs;登録済みのファイル拡張子を変更するには、たとえば： "f：\ folder\report.html"ディレクトリ？

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

私はいくつかのアプローチを経て、次のタイプセーフ（DefinitelyTyped）を結論付けました。

   exportAsExcel(tableId: string, fileName: string, linkElement: any) {



        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(decodeURI(encodeURIComponent(s)));
            },

            format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) {
                    return c[p];
                });
            };
        // get the table data
        var table = document.getElementById(tableId);
        var ctx = {
            worksheet: fileName,
            table: table.innerHTML
        };
        // if browser is IE then save the file as blob, tested on IE10 and IE11
        var browser = window.navigator.appVersion;
        if ((browser.indexOf('Trident') !== -1 && browser.indexOf('rv:11') !== -1) ||
            (browser.indexOf('MSIE 10') !== -1)) {
            var builder = new MSBlobBuilder(); 
            builder.append(uri + format(template, ctx));
            var blob = builder.getBlob('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'); 
            window.navigator.msSaveBlob(blob, fileName + '.xlsx'); 
        } else {
            var element = document.getElementById(linkElement);
            var a = document.createElement('a');
            a.href = uri + base64(format(template, ctx));
            a.target = '_blank';
            a.setAttribute('download', fileName + '.xlsx');
            document.body.appendChild(a);
            a.click();

        }
        toastr.success("Awesome!", "We've created an Excel report for you and you should get it as a download in your browser.");
    }

さまざまな記事でもちろん貢献してくれた人に称賛を送ります。

2
Marco

テーブルからJson、Xml、Pdfなどのさまざまな形式にデータをエクスポートできます。

詳細な説明を見つけることができます http://www.prathapkudupublog.com/2015/10/angular-export-to-table.html 注：この実装はIEでは実行されません

あなたは何が必要ですか？ Angularjs Jquery.js以下の表で参照されているファイル

 <script type="text/javascript">
    var myAppModule = angular.module('myApp', []);
    myAppModule.controller('myCtrl', function ($scope) {
        $scope.exportData = function () {
            $('#customers').tableExport({ type: 'json', escape: 'false' });
        };
        $scope.items = [
            {
                "FirstName": "Prathap",
                "LastName": "Kudupu",
                "Address": "Near Anjana Beach"
            },
            {
                "FirstName": "Deepak",
                "LastName": "Dsouza",
                "Address": "Near Nariman Point"
            }
        ];

    });
0
Prathap Kudupu