Angular JSでHTMLテーブルをエクスポートするには？

-1

私はHTMLファイルで簡単なテーブルを作成しました。今、私はそれをAngular JSのPDFまたはExcelまたはCSV形式でエクスポートする必要がありますか？それを行う簡単な方法はありますか？Angular JSでHTMLテーブルをエクスポートするには？

出典

2017-02-21 Teddu

UIグリッドのようなカスタムグリッドを使用しhttp://ui-grid.info/ –

ここでは、HTMLテーブルをエクスポートする例を示します。ブラウザでpdf、csv、xlsxなどのサポートされているフォーマットで保存できます。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function ($scope) { 
 
    $scope.exportData = function() { 
 
     var blob = new Blob([document.getElementById('exportable').innerHTML], { 
 
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 
 
     }); 
 
     saveAs(blob, "Report Example.xls"); 
 
    }; 
 

 
    $scope.items = [{ 
 
     name: "John Smith", 
 
     email: "[email protected]", 
 
     dob: "1985-10-10" 
 
    }, { 
 
     name: "Jane Smith", 
 
     email: "[email protected]", 
 
     dob: "1988-12-22" 
 
    }, { 
 
     name: "Jan Smith", 
 
     email: "[email protected]", 
 
     dob: "2010-01-02" 
 
    }, { 
 
     name: "Jake Smith", 
 
     email: "[email protected]", 
 
     dob: "2009-03-21" 
 
    }, { 
 
     name: "Josh Smith", 
 
     email: "[email protected]", 
 
     dob: "2011-12-12" 
 
    }, { 
 
     name: "Jessie Smith", 
 
     email: "[email protected]", 
 
     dob: "2004-10-12" 
 
    }] 
 
});

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script> 
 
</head> 
 
<body> 
 
<div ng-controller="myCtrl"> 
 
    <button ng-click="exportData()">Export</button> 
 
    <br /> 
 
    <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> 
 
</div> 
 
</body> 
 
</html>

出典

2017-02-21 08:54:57 nivas

。これが働いた:) – Teddu

は、私たちも、PDFのためにこれを行うことができますありがとうございましたか！ – Teddu

'pdf'として' html'を保存するには 'jsPdf'ライブラリが必要です。ここに例がありますhttp://plnkr.co/edit/5NonsdQ23nXwFchV01sB?p=preview – nivas

Angular JSでHTMLテーブルをエクスポートするには？

答えて

関連する問題