代码示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <style> 8 /* 此样式仅用于浏览器页面效果，Excel不会分离表格边框，不需要此样式 */ 9 table { 10 border-collapse: collapse; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- 设置border="1"以显示表格框线 --> 16 <table border="1"> 17 <!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 --> 18 <caption>学生成绩表</caption> 19 <tr> 20 <!-- 可以使用rowspan和colspan来合并单元格 --> 21 <th rowspan="2">编号</th> 22 <th rowspan="2">学号</th> 23 <th rowspan="2">姓名</th> 24 <th rowspan="2">性别</th> 25 <th rowspan="2">年龄</th> 26 <th colspan="3">成绩</th> 27 </tr> 28 <tr> 29 <th>语文</th> 30 <th>数学</th> 31 <th>英语</th> 32 </tr> 33 <tr> 34 <td>1</td> 35 <td>2016001</td> 36 <td>张三</td> 37 <td>男</td> 38 <td>13</td> 39 <td>85</td> 40 <td>94</td> 41 <td>77</td> 42 </tr> 43 <tr> 44 <td>2</td> 45 <td>2016002</td> 46 <td>李四</td> 47 <td>女</td> 48 <td>12</td> 49 <td>96</td> 50 <td>84</td> 51 <td>89</td> 52 </tr> 53 </table> 54 55 <a>导出表格</a> 56 57 <script> 58 // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码 59 var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>"; 60 // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象 61 var blob = new Blob([html], { type: "application/vnd.ms-excel" }); 62 var a = document.getElementsByTagName("a")[0]; 63 // 利用URL.createObjectURL()方法为a元素生成blob URL 64 a.href = URL.createObjectURL(blob); 65 // 设置文件名，目前只有Chrome和FireFox支持此属性 66 a.download = "学生成绩表.xls"; 67 </script> 68 </body> 69 </html>