步骤：
1:引入Bootstrap Table表格插件相关链接：这里直接拿来用就可以了，如果要下载到本地，可以自行去官网下载。
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入bootstrap-table样式 --> <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <!-- jquery及bootstrapjs --> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- bootstrap-table.min.js --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> <!-- 引入中文语言包 --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
2：实现一个简单的表格和分页
自己写了一个json格式的数据，进行模拟
3：前端js实现打印（导出）excel表格
4：可复制黏贴的代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入bootstrap-table样式 --> <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <!-- jquery及bootstrapjs --> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- bootstrap-table.min.js --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> <!-- 引入中文语言包 --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> <body> <div class="tools"> <button type="button" class="btn green" id="excell" onclick="method5('mytab')">导出表格</button> </div> <table id="mytab" class="table table-hover"></table> <script> $('#mytab').bootstrapTable({ url: 'data1.json', queryParams: "queryParams", toolbar: "#toolbar", sidePagination: "true", striped: true, // 是否显示行间隔色 //search : "true", uniqueId: "ID", pageSize: "5", pagination: true, // 是否分页 sortable: true, // 是否启用排序 columns: [{ field: 'id', title: '登录名' }, { field: 'name', title: '昵称' }, { field: 'price', title: '角色' }, { field: 'price', title: '操作', width: 120, align: 'center', valign: 'middle', formatter: actionFormatter, }, ] }); //操作栏的格式化 function actionFormatter(value, row, index) { var id = value; var result = ""; result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>"; return result; } //打印表格 var idTmr; function getExplorer() { var explorer = window.navigator.userAgent; //ie if(explorer.indexOf("MSIE") >= 0) { return 'ie'; } //firefox else if(explorer.indexOf("Firefox") >= 0) { return 'Firefox'; } //Chrome else if(explorer.indexOf("Chrome") >= 0) { return 'Chrome'; } //Opera else if(explorer.indexOf("Opera") >= 0) { return 'Opera'; } //Safari else if(explorer.indexOf("Safari") >= 0) { return 'Safari'; } } function method5(tableid) { if(getExplorer() == 'ie') { var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("Excel.Application"); var oWB = oXL.Workbooks.Add(); var xlsheet = oWB.Worksheets(1); var sel = document.body.createTextRange(); sel.moveToElementText(curTbl); sel.select(); sel.execCommand("Copy"); xlsheet.Paste(); oXL.Visible = true; try { var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); } catch(e) { print("Nested catch caught " + e); } finally { oWB.SaveAs(fname); oWB.Close(savechanges = false); oXL.Quit(); oXL = null; idTmr = window.setInterval("Cleanup();", 1); } } else { tableToExcel(tableid) } } function Cleanup() { window.clearInterval(idTmr); CollectGarbage(); } var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,', template = '<html><head><meta charset="UTF-8"></head><body><table border="1">{table}</table></body></html>', base64 = function( s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } return function(table, name) { if(!table.nodeType) table = document.getElementById(table) var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML } window.location.href = uri + base64(format(template, ctx)) } })() </script> </body> </html>
data1.json
[ { "id": 0, "name": "高渐离", "price": "$0" }, { "id": 1, "name": "王昭君", "price": "$1" }, { "id": 2, "name": "安琪拉", "price": "$2" }, { "id": 3, "name": "蔡文姬", "price": "$3" }, { "id": 4, "name": "孙尚香", "price": "$4" }, { "id": 5, "name": "甄姬", "price": "$5" }, { "id": 6, "name": "妲己", "price": "$6" }, { "id": 7, "name": "米莱地", "price": "$7" }, { "id": 8, "name": "大乔", "price": "$8" }, { "id": 9, "name": "小巧", "price": "$9" }, { "id": 10, "name": "张亮", "price": "$10" }, { "id": 11, "name": "诸葛亮", "price": "$11" }, { "id": 12, "name": "韩信", "price": "$12" }, { "id": 13, "name": "兰陵王", "price": "$13" }, { "id": 14, "name": "貂蝉", "price": "$14" }, { "id": 15, "name": "后裔", "price": "$15" }, { "id": 16, "name": "黄忠", "price": "$16" }, { "id": 17, "name": "虞姬", "price": "$17" }, { "id": 18, "name": "程咬金", "price": "$18" }, { "id": 19, "name": "庄周", "price": "$19" }, { "id": 20, "name": "项羽", "price": "$20" } ]
导出当前选中页码的表格（这是第一页的数据）
