类别：程序开发
日期：2020-07-11 浏览：3473 评论：0
有时候我们需要把网页中的数据导出excel格式来，那么我们用下面两种方法可以完成。
第一种.自写代码
<html><head><meta http-equiv="content-Type" content="text/html;charset=utf-8"/><script type="text/javascript">
function base64 (content) {
return window.btoa(unescape(encodeURIComponent(content)));
}
/*
*@tableId: table的Id
*@fileName: 要生成excel文件的名字（不包括后缀，可随意填写）
*/
function tableToExcel(tableID,fileName){
var table = document.getElementById(tableID);
var excelContent = table.innerHTML;
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>";
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();
}</script></head><body><button type="button" onclick="tableToExcel('item','data')">导出</button><table id="item">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>19</td>
</tr>
<tr>
<td>2</td>
<td>小芳</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>大军</td>
<td>22</td>
</tr></table></body></html>第二种.jquery插件
首先要先下载一个jquery.table2excel.js插件(网上搜搜)，然后使用。
<!doctype html> <html> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table2excel</title>
<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body>
<header>
<h4>table2excel-可将HTML表格内容导出到Excel中的jQuery插件 <span>jQuery Plugin to export HTML tabled to Excel Spreadsheet Compatible Files</span></h4>
</header>
<section>
<div style="padding:30px 0">
<div>
<div>
<div class="table-responsive table2excel" data-tableName="Test Table 1">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td>带<code>noExl</code>class的行不会被输出到excel中</td>
<td>带<code>noExl</code>class的行不会被输出到excel中</td>
</tr>
<tr>
<td>这一行会被导出到excel中</td>
<td>这一行会被导出到excel中</td>
</tr>
</thead>
<tbody>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-1</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合并2个单元格</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<button id="btn" class="btn btn-primary">点击这里将表格内容导出到excel中</button>
</div>
</section>
<script src="jquery/jquery-1.8.0.min.j"></script>
<script src="dist/jquery.table2excel.js"></script>
<script>
$(function() {
$("#btn").click(function(){
$(".table2excel").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "FileName.xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
});
});
</script> </body> </html>附上jquery-table2excel.js下载地址
此处为隐藏内容，请评论后查看隐藏内容，谢谢！
本文标题：如何在html中通过table导出Excel？
本文链接：https://vtzw.com/post/215.html
版权声明：本文不使用任何协议授权，您可以任何形式自由转载或使用。
您阅读本篇文章共花了： 可能感兴趣的文章
C# 几十万级数据导出Excel，及Excel各种操作
方法1：先上导出代码///<summary>///导出速度最快&nb...
发表评论 / 取消回复