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: 实现一个简单的表格和分页
如果不会可以参考这篇教程:
https://www.jianshu.com/p/b5ca011a0d9c
自己写了一个 JSON 格式的数据, 进行模拟
3: 前端 JS 实现打印 (导出)Excel 表格
参考: https://www.jianshu.com/p/b5bcee88cf40
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 = Windows.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 = Windows.setInterval("Cleanup();", 1);
- }
- } else {
- tableToExcel(tableid)
- }
- }
- function Cleanup() {
- Windows.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 Windows.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
- }
- Windows.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"
- }
- ]
导出当前选中页码的表格 (这是第一页的数据)
来源: http://www.jianshu.com/p/761299fd877f