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 = 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" } ]
導出當前選中頁碼的表格(這是第一頁的數據)
原文作者:祈澈姑娘 技術博客:https://www.jianshu.com/u/05f416aefbe1 90後前端妹子,愛編程,愛運營,文藝與代碼齊飛,魅力與智慧共存的程序媛一枚。 堅持總結工作中遇到的技術問題,堅持記錄工作中所所思所見,對於博客上面有不會的問題,可以加入qq技術交流羣聊:649040560。