很多时候的很多想法都是和别人一起探讨出来的,并非个人所一个人想出来的。
想法背景:今天和同事探讨需求时候我突然想到能让前端去校验Excel里面已存在的两条员工的数据这样可以避免到服务器C#后端去校验从而减轻服务器的压力
首先得引入xlsx.mini.js文件，可以去官方下载,官方有案例说明,不想的看的话可以下载我的代码到本地看
js 导入Excel后的显示
//读取本地文件
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");
})
})
js 导入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"));
})
})
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);
}
能够实现导入和导出功能全靠网上大神，参考文章：
使用xlsx.core.min.js进行导入(表格)导出(Excel)功能_￡漫步 云端彡的博客-CSDN博客
https://www.cnblogs.com/ajaemp/p/12880847.html
使用js-xlsx纯前端导出excel_tianfugui的博客-CSDN博客
