1. 实现后的效果
选择一个简单的excel试试
导入的库：Luckyexcel
可以看到是能成功渲染的，后面要做的就是在此基础上改成自己想要的样式了
2. 功能实现
这个功能的实现依赖于Luckysheet ，它提供了纯前端类似excel的在线表格，本身的功能其实挺强大的，支持多人协同编辑，也支持导入导出excel
那么因为这个框架已经实现了这个功能，我们要做的就是进行调用对于的api。
官方文档：LuckysheetDocs 中说明了我们可以使用 Luckyexcel 对excel进行导入
一个最简单的例子：
代码来源于https://github.com/dream-num/Luckyexcel/blob/master/src/index.html
这里只是对代码当中的css和js引用做了一下修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckyexcel/dist/luckyexcel.umd.js"></script>
<script>
$(function () {
//Configuration item
var options = {
container: 'luckysheet', //luckysheet is the container id
showinfobar:false,
}
luckysheet.create(options)
});
</script>
</head>
<body>
<body>
<div id="lucky-mask-demo" style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); text-align: center;font-size: 40px;align-items:center;justify-content: center;display: none;">Downloading</div>
<p style="text-align:center;"> <input style="font-size:16px;" type="file" id="Luckyexcel-demo-file" name="Luckyexcel-demo-file" change="demoHandler" /> Or Load remote xlsx file: <select style="height: 27px;top: -2px;position: relative;" id="Luckyexcel-select-demo"> <option value="">select a demo</option> <option value="https://minio.cnbabylon.com/public/luckysheet/money-manager-2.xlsx">Money Manager.xlsx</option> <option value="https://minio.cnbabylon.com/public/luckysheet/Activity%20costs%20tracker.xlsx">Activity costs tracker.xlsx</option><option value="https://minio.cnbabylon.com/public/luckysheet/House%20cleaning%20checklist.xlsx">House cleaning checklist.xlsx</option><option value="https://minio.cnbabylon.com/public/luckysheet/Student%20assignment%20planner.xlsx">Student assignment planner.xlsx</option><option value="https://minio.cnbabylon.com/public/luckysheet/Credit%20card%20tracker.xlsx">Credit card tracker.xlsx</option><option value="https://minio.cnbabylon.com/public/luckysheet/Blue%20timesheet.xlsx">Blue timesheet.xlsx</option><option value="https://minio.cnbabylon.com/public/luckysheet/Student%20calendar%20%28Mon%29.xlsx">Student calendar (Mon).xlsx</option><option value="https://minio.cnbabylon.com/public/luckysheet/Blue%20mileage%20and%20expense%20report.xlsx">Blue mileage and expense report.xlsx</option> </select> <a href="javascript:void(0)" id="Luckyexcel-downlod-file">Download source xlsx file</a></p>
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 50px;bottom: 0px;outline: none;"></div>
<!-- <script type="module">
import l from './luckyexcel.js';
console.info('=====',l)
// window.onload = () => {
// let upload = document.getElementById("file");
// upload.addEventListener("change", function(evt){
// var files = evt.target.files;
// importFile(files[0]);
// });
// }
</script> -->
<script>
function demoHandler(){
let upload = document.getElementById("Luckyexcel-demo-file");
let selectADemo = document.getElementById("Luckyexcel-select-demo");
let downlodDemo = document.getElementById("Luckyexcel-downlod-file");
let mask = document.getElementById("lucky-mask-demo");
if(upload){
window.onload = () => {
upload.addEventListener("change", function(evt){
var files = evt.target.files;
if(files==null || files.length==0){
alert("No files wait for import");
return;
}
let name = files[0].name;
let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length-1];
if(suffix!="xlsx"){
alert("Currently only supports the import of xlsx files");
return;
}
LuckyExcel.transformExcelToLucky(files[0], function(exportJson, luckysheetfile){
if(exportJson.sheets==null || exportJson.sheets.length==0){
alert("Failed to read the content of the excel file, currently does not support xls files!");
return;
}
window.luckysheet.destroy();
window.luckysheet.create({
container: 'luckysheet', //luckysheet is the container id
showinfobar:false,
data:exportJson.sheets,
title:exportJson.info.name,
userInfo:exportJson.info.name.creator
});
});
});
selectADemo.addEventListener("change", function(evt){
var obj = selectADemo;
var index = obj.selectedIndex;
var value = obj.options[index].value;
var name = obj.options[index].innerHTML;
if(value==""){
return;
}
mask.style.display = "flex";
LuckyExcel.transformExcelToLuckyByUrl(value, name, function(exportJson, luckysheetfile){
if(exportJson.sheets==null || exportJson.sheets.length==0){
alert("Failed to read the content of the excel file, currently does not support xls files!");
return;
}
console.log(exportJson, luckysheetfile);
mask.style.display = "none";
window.luckysheet.destroy();
window.luckysheet.create({
container: 'luckysheet', //luckysheet is the container id
showinfobar:false,
data:exportJson.sheets,
title:exportJson.info.name,
userInfo:exportJson.info.name.creator
});
});
});
downlodDemo.addEventListener("click", function(evt){
var obj = selectADemo;
var index = obj.selectedIndex;
var value = obj.options[index].value;
if(value.length==0){
alert("Please select a demo file");
return;
}
var elemIF = document.getElementById("Lucky-download-frame");
if(elemIF==null){
elemIF = document.createElement("iframe");
elemIF.style.display = "none";
elemIF.id = "Lucky-download-frame";
document.body.appendChild(elemIF);
}
elemIF.src = value;
});
}
}
}
demoHandler();
</script>
</body>
</body>
</html>