HTML(4)使用jquery将table中的内容输出为表格
2019-08-04 本文已影响0人
弗兰克万岁
先引入jquery,版本自己选择，我用的是2.0的，因为要兼容xp系统
<script src = "[https://libs.baidu.com/jquery/1.11.1/jquery.min.js] <br>
(https://libs.baidu.com/jquery/1.11.1/jquery.min.js)"></script>
然后在头部加入引用
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../css/myBox.css" rel="stylesheet" type="text/css">
<link href="../css/common.css" rel="stylesheet" type="text/css">
<script src="../js/jquery2.0.min.js"></script>
</head>
最后复制这段代码到尾部，给button按钮绑定onclick事件，注意输入的变量为table的id和输出的文件夹名称。
<script >
// // $.noConflict();
// $(document).ready(function(){
// $("#test222").click(function(){
// console.log('test');
// tableToExcel('table1','test');
// });
// });
#有需要的将上面的注释删除，我直接使用onclick绑定的。
function tableToExcel(tableID, fileName) {
console.log('test2');
var excelContent = $("#" + tableID).html();
// alert(excelContent);
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
excelFile += "<body><table width='10%' border='1'>";
excelFile += excelContent;
excelFile += "</table></body>";
excelFile += "</html>";
var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);
var a = document.createElement("a");
a.download = fileName + ".xlsx";
a.href = link;
a.click();
}
function base64(content) {
return window.btoa(unescape(encodeURIComponent(content)));
}
</script>
2019年8月4日
来源：https://www.jianshu.com/u/e410909d5b98
