zoukankan      html  css  js  c++  java
  • 浏览器端JS导出EXCEL——001

    <script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
    <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>

    function myCtrl($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.xls");
    };

    $scope.items = [{
    name: "John Smith",
    email: "j.smith@example.com",
    dob: "1985-10-10"
    }, {
    name: "Jane Smith",
    email: "jane.smith@example.com",
    dob: "1988-12-22"
    }, {
    name: "Jan Smith",
    email: "jan.smith@example.com",
    dob: "2010-01-02"
    }, {
    name: "Jake Smith",
    email: "jake.smith@exmaple.com",
    dob: "2009-03-21"
    }, {
    name: "Josh Smith",
    email: "josh@example.com",
    dob: "2011-12-12"
    }, {
    name: "Jessie Smith",
    email: "jess@example.com",
    dob: "2004-10-12"
    }]
    }

  • 相关阅读:
    css浏览器兼容问题集锦
    【转】H264编码原理以及I帧B帧P帧
    Makefile Shell 脚本;sed命令
    oProfile 学习
    C++ 局部变量的析构
    【转】C++ 单例模式
    C++ operator 知识点 2
    C++ operator 知识点
    218多校第九场 HDU 6424 (数学)
    2018多校第九场 HDU 6416 (DP+前缀和优化)
  • 原文地址:https://www.cnblogs.com/zxtceq/p/6678140.html
Copyright © 2011-2022 走看看