首页 文章

在AngularJS中以CSV,Excel,PDF格式导出数据

提问于
浏览 1633
17

我想在我的应用程序中添加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中运行不正常(文件显示已损坏的数据) .
谁能告诉我如何在angularjs中以CSV,Excel和PDF格式导出表格数据?

5 回答

  • 14

    另存为;要更改已注册的文件扩展名,例如:“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");
    
  • 6

    如果您对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}];                            
    }
    
  • 2

    我已经完成了几种方法并得出以下结论,类型安全(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.");
        }
    

    感谢那些在各篇文章中做出贡献的人

  • 1

    我们可以将表中的数据导出为各种格式,包括Json,Xml,Pdf ......

    你可以找到详细的解释http://www.prathapkudupublog.com/2015/10/angular-export-to-table.html注意:这个实现不会在IE中运行

    你需要什么? Angularjs Jquery.js文件在下面的tableExport.js,JqueryBase64.js,html2canvas.js,base64.js,Jspdf.js,sprintf.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

    您可以使用带有XLSX.jsAlasql JavaScript库将AngularJS中的数据导出为XLS,XLSX,CSV和TAB格式 .

    在代码中包含两个库:

    要将数据导出为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中尝试this example .

    要将数据保存为CSV格式,请使用CSV()函数:

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

    或者使用TXT(),CSV(),TAB(),XLS(),XLSX()函数来获得正确的文件格式 .

相关问题