使用xlsx.core.min.js进行导入(表格)导出(Excel)功能
首先得引入xlsx.core.min.js文件，可以去官方下载，其中有xlsx.core.min.js和xlsx.full.min.js，一般来说第一个就够用了，后者是加入了更多的功能。
- 导出Excel文档，可选择性导出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="text-align: center;">
<button type="button" style="text-align: center;margin: 10px;">导出excel</button>
<table width="50%" align="center" border="1" id="myTable">
<thead>
<tr>
<td><input type="checkbox" class="all-checkbox export-remove"/></td>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
</tr>
</thead>
<tbody align="center" >
<tr>
<td><input type="checkbox" class="checkbox export-remove"/></td>
<td>小张</td>
<td>18</td>
<td>19849383784</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox export-remove"/></td>
<td>小张</td>
<td>16</td>
<td>19843333378</td>
</tr>
<tr style="display: none;">
<td><input type="checkbox" class="checkbox export-remove"/></td>
<td>小李</td>
<td>20</td>
<td>1323439443</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox export-remove"/></td>
<td>小吴</td>
<td>18</td>
<td>12349484854</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox export-remove"/></td>
<td>小赵</td>
<td>20</td>
<td>13234349483</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox export-remove"/></td>
<td>小王</td>
<td>17</td>
<td>15728393843</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox export-remove"/></td>
<td>小倩</td>
<td>18</td>
<td>11242383784</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox export-remove"/></td>
<td>小兰</td>
<td>20</td>
<td>13984859483</td>
</tr>
</tbody>
</table>
</body>
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/export.js" type="text/javascript" charset="utf-8"></script>
<script src="js/xlsx.core.min.js" type="text/javascript" charset="utf-8"></script>
<script>
//表格转Excel文件
function tableToExcel(tableDOM,filename) {
let tableSheet = XLSX.utils.table_to_sheet(tableDOM);
openDownloadDialog(sheet2blob(tableSheet),filename+'.xlsx');
}
$("button").click(() => {
let sheetTable = $("<table></table>");
//拷贝一份到需要打印的表格,直接写等于剪切,所以加clone()
sheetTable.append($("#myTable").find("thead").clone());
sheetTable.append($("<tbody></tbody>"));
let tbody = sheetTable.find("tbody");
let checkboxs = $(".checkbox:checked");
for (let checkbox of checkboxs) {
//获取选中行
let tr = $(checkbox).parents('tr')[0];
//拷贝一份到需要打印的表格
tbody.append($(tr).clone());
}
sheetTable.find(".export-remove").parent().remove();
//文件名字可自定义
tableToExcel(sheetTable[0],"测试");
})
$(".all-checkbox").change(()=>{
$(".checkbox").prop("checked",$(".all-checkbox").prop("checked"));
})
</script>
</html>
这里导入一个export.js文件，这个文件的代码主要是将表格Sheet转成blod对象，然后利用URL.createObjectURL下载。代码借用网上大神的。
页面视图：
导出效果：
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {
}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
- 导入Excel生成表格数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="text-align: center;">
<!-- 将文件选择框隐藏 -->
<input type="file" id="file" onchange="getFile()" style="display: none;" accept=".xls,.xlsx" />
<button id="btn">获取本地excel数据</button>
<div style="width: 100%;text-align: center;margin-top: 10px;"
id="tableContainer">
</div>
</body>
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/export.js" type="text/javascript" charset="utf-8"></script>
<script src="js/xlsx.core.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//读取本地文件
function readWorkbookFromLocalFile(file, callback) {
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
if (callback) callback(workbook);
};
}
function getFile() {
let files = $('#file').prop('files');
if (files) {
readWorkbookFromLocalFile(files[0], (workbook) => {
createTables(workbook.Sheets)
});
}
}
//将sheets转换为表格
function createTables(sheets) {
let div = $("<div></div>")
//遍历每一张sheet表格
for (let i in sheets) {
//转换HTML是一个数组对象，分为三部分:meta,title,table
let table = $(XLSX.utils.sheet_to_html(sheets[i]))[2];
let $table = $(table)
$table.attr("width","80%")
$table.attr("border","1")
$table.attr("align","center")
$table.css({
"margin":"5%"
})
$("#tableContainer").append($table)
}
}
$(function() {
$("#btn").click(() => {
//手动触发文本输入框
$("#file").trigger("click");
})
})
</script>
</html>
excel表数据：
页面效果：
能够实现导入和导出功能全靠网上大神，参考文章：
https://www.cnblogs.com/ajaemp/p/12880847.html
https://blog.csdn.net/tian_i/article/details/84327329