1、新建html文档。
2、准备好需要用到的字体图标。
3、书写hmtl代码。<div class="container"> <div class="row"> <div class="col-md-3" style="padding:2em 0;"> <button type="button" class="btn btn-success btn-block" id="generate-excel"><i class="fa fa-file-excel-o" aria-hidden="true"></i> 将表格转换为Excel</button> </div> <div class="col-md-12" style="padding:2em 0;"> <div class="table-responsive"> <table class="table table-bordered table-striped" id="test_table"> <thead> <tr> <td>等级</td><td>姓名</td><td>城市</td><td>州</td><td>部门</td><td>选取</td><td>票数</td> </tr> </thead> <tbody> <tr> <td><span>1</span></td><td><span>Small, Steve </span></td><td><span>New York</span></td><td><span>NY</span></td><td><span>Eastern</span></td><td><span>Metropolitan Region</span></td><td><span>378</span></td> </tr> <tr> <td><span>2</span></td><td><span>Novello, Rodolfo </span></td><td><span>Lawrence</span></td><td><span>NY</span></td><td><span>Eastern</span></td><td><span>Long Island Region</span></td><td><span>223</span></td> </tr> <tr> <td><span>3</span></td><td><span>O'Neill, Jim </span></td><td><span>Philmont</span></td><td><span>NY</span></td><td><span>Eastern</span></td><td><span>Northern Region</span></td><td><span>192</span></td> </tr> <tr> <td><span>4</span></td><td><span>Sobong, Emmanuel </span></td><td><span>River Edge</span></td><td><span>NJ</span></td><td><span>Eastern</span></td><td><span>New Jersey Region</span></td><td><span>162</span></td> </tr> <tr> <td><span>5</span></td><td><span>Stewart, Cliff </span></td><td><span>Bridgewater</span></td><td><span>NJ</span></td><td><span>Eastern</span></td><td><span>New Jersey Region</span></td><td><span>132</span></td> </tr> <tr> <td><span>6</span></td><td><span>Erskine, Ronald G </span></td><td><span>Ridgewood</span></td><td><span>NJ</span></td><td><span>Eastern</span></td><td><span>New Jersey Region</span></td><td><span>126</span></td> </tr> <tr> <td><span>6</span></td><td><span>Levine, Max </span></td><td><span>West Sand Lake</span></td><td><span>NY</span></td><td><span>Eastern</span></td><td><span>Northern Region</span></td><td><span>126</span></td> </tr> <tr> <td><span>6</span></td><td><span>Warren, Paul </span></td><td><span>Schenectady</span></td><td><span>NY</span></td><td><span>Eastern</span></td><td><span>Northern Region</span></td><td><span>126</span></td> </tr> <tr> <td><span>9</span></td><td><span>Fischbach, David </span></td><td><span>Prt Washingtn</span></td><td><span>NY</span></td><td><span>Eastern</span></td><td><span>Long Island Region</span></td><td><span>97</span></td> </tr> <tr> <td><span>9</span></td><td><span>Lai, Ben </span></td><td><span>Bridgewater</span></td><td><span>NJ</span></td><td><span>Eastern</span></td><td><span>New Jersey Region</span></td><td><span>97</span></td> </tr> <tr> <td><span>11</span></td><td><span>Gitterman, Matthew </span></td><td><span>Bridgewater</span></td><td><span>NJ</span></td><td><span>Eastern</span></td><td><span>New Jersey Region</span></td><td><span>96</span></td> </tr> <tr> <td><span>11</span></td><td><span>Kalina, Jonathan </span></td><td><span>Fair Lawn</span></td><td><span>NJ</span></td><td><span>Eastern</span></td><td><span>New Jersey Region</span></td><td><span>96</span></td> </tr> <tr> <td><span>11</span></td><td><span>Elfant, Scott </span></td><td><span>Paramus</span></td><td><span>NJ</span></td><td><span>Eastern</span></td><td><span>New Jersey Region</span></td><td><span>96</span></td> </tr> </tbody> </table> </div> </div> </div></div>
4、书写css代码。body, html { font-size: 100%; padding: 0; margin: 0; }*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }.clearfix:before, .clearfix:after { content: " "; display: table; }.clearfix:after { clear: both; }body { font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif; }
5、书写并添加js代码。<script src="external/jquery-1.8.2.js"></script><script src="external/jszip.js"></script><script src="external/FileSaver.js"></script><script src="scripts/excel-gen.js"></script><script src="scripts/demo.page.js"></script>
6、代码整体结构。
7、查看效果。
