閱讀之前
現在導入已經有Luckexcel支持，歡迎試用反饋：
這篇文章的部分API已不開放，但是仍然在源碼里，這里僅供參考作用，直接復制粘貼跑不起來。
問題
Luckysheet是一款功能很豐富的在線電子表格插件,但是初始版本暫時不支持excel導入導出.筆者結合身邊朋友的經驗,給出案例供參考.
解決方案
通過sheetJs將導入的excel文件轉換成Luckysheet能夠支持的數據格式即可
操作步驟
- 參照官網教程,先打包源代碼,得到Luckysheet核心文件,並在在項目主頁引入Luckysheet依賴的js，css,和sheetJs插件xlsx.full.min.js
<link rel="stylesheet" href="./luckysheet/plugins/css/pluginsCss.min.css">
<link rel="stylesheet" href="./luckysheet/plugins/plugins.min.css">
<link rel="stylesheet" href="./luckysheet/css/main.min.css">
<script src="./luckysheet/plugins/js/plugin.min.js"></script>
<script src="./luckysheet/main.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
- 頁面准備,渲染一個空白的Luckysheet,
input file監聽Excel文件上傳，通過sheetJs將導入的數據轉換成Luckysheet能夠識別的格式
// 渲染一個空白的Luckysheet
$(function () {
luckysheet.create({
container: 'luckysheet'
})
})
// 監聽文件上傳
var input = document.querySelector('input');
input.addEventListener('change', importExcel);
- 通過sheetJs將導入的excel數據轉換成html table格式數據,使用從luckysheet中抽出來的數據轉換方法, 轉換為Luckysheet可識別的格式
// 獲取excel數據
function importExcel(event) {
var file = event.target.files[0];
/* 實例FileReader對象 */
//other code...
}
// 解析excel數據
function readFile(txtdata) {
$("#luckysheet-copy-content").html(txtdata);
//other code...
}
代碼參考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>luckysheet import excel</title>
<link rel="stylesheet" href="./luckysheet/plugins/css/pluginsCss.min.css">
<link rel="stylesheet" href="./luckysheet/plugins/plugins.min.css">
<link rel="stylesheet" href="./luckysheet/css/main.min.css">
<script src="./luckysheet/plugins/js/plugin.min.js"></script>
<script src="./luckysheet/main.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
<style>
#container {
position: relative;
}
</style>
</head>
<body>
<div id="container">
<input type="file" />
<div id="luckysheet"
style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 30px;"></div>
</div>
<script>
document.querySelector('#container').style.height = window.innerHeight + 'px';
// 渲染一個空白的Luckysheet
$(function () {
luckysheet.create({
container: 'luckysheet'
})
})
// 監聽文件上傳
var input = document.querySelector('input');
input.addEventListener('change', importExcel);
// 獲取excel數據
function importExcel(event) {
var file = event.target.files[0];
/* 實例FileReader對象 */
var reader = new FileReader();
reader.onload = function (e) {
/* Parse data */
var bstr = e.target.result;
var wb = XLSX.read(bstr, { type: 'binary' });
/* 獲取第一個工作表*/
var wsname = wb.SheetNames[0];
var ws = wb.Sheets[wsname];
/* 將工作表對象轉換為JSON對象數組*/
// var dataArr = XLSX.utils.sheet_to_json(ws, { header: 1 });
/* 生成HTML輸出 */
var data = XLSX.utils.sheet_to_html(ws);
/* 調用數據轉換方法將數據格式轉換成Luckysheet格式*/
readFile(data);
};
/*將文件內容讀取為原始二進制字符串*/
reader.readAsBinaryString(file);
}
// 解析excel數據
function readFile(txtdata) {
$("#luckysheet-copy-content").html(txtdata);
var data = new Array($("#luckysheet-copy-content").find("table tr").length);
var colLen = 0;
$("#luckysheet-copy-content").find("table tr").eq(0).find("td").each(function () {
var colspan = parseInt($(this).attr("colspan"));
if (isNaN(colspan)) {
colspan = 1;
}
colLen += colspan;
});
for (var i = 0; i < data.length; i++) {
data[i] = new Array(colLen);
}
var r = 0;
var borderInfo = {};
var luckysheet_select_save = luckysheet.getluckysheet_select_save();
$("#luckysheet-copy-content").find("table tr").each(function () {
var $tr = $(this);
var c = 0;
$tr.find("td").each(function () {
var $td = $(this);
var cell = {};
var txt = $td.text();
if ($.trim(txt).length == 0) {
cell.v = null;
cell.m = "";
}
else {
var mask = luckysheet.mask.genarate($td.text());
cell.v = mask[2];
cell.ct = mask[1];
cell.m = mask[0];
}
var bg = $td.css("background-color");
if (bg == "rgba(0, 0, 0, 0)") {
bg = "rgba(255,255,255)";
}
cell.bg = bg;
var bl = $td.css("font-weight");
if (bl == 400 || bl == "normal") {
cell.bl = 0;
}
else {
cell.bl = 1;
}
var it = $td.css("font-style");
if (it == "normal") {
cell.it = 0;
}
else {
cell.it = 1;
}
var ff = $td.css("font-family");
var ffs = ff.split(",");
for (var i = 0; i < ffs.length; i++) {
var fa = $.trim(ffs[i].toLowerCase());
fa = luckysheet.menuButton.fontjson[fa];
if (fa == null) {
cell.ff = 0;
}
else {
cell.ff = fa;
break;
}
}
var fs = Math.floor(parseInt($td.css("font-size")) * 72 / luckysheet.dpi_y) + 1;
cell.fs = fs;
var fc = $td.css("color");
cell.fc = fc;
var ht = $td.css("text-align");
if (ht == "center") {
cell.ht = 0;
}
else if (ht == "right") {
cell.ht = 2;
}
else {
cell.ht = 1;
}
var vt = $td.css("vertical-align");
if (vt == "middle") {
cell.vt = 0;
}
else if (vt == "top" || vt == "text-top") {
cell.vt = 1;
}
else {
cell.vt = 2;
}
while (c < colLen && data[r][c] != null) {
c++;
}
if (c == colLen) {
return true;
}
if (data[r][c] == null) {
data[r][c] = cell;
var rowspan = parseInt($td.attr("rowspan"));
var colspan = parseInt($td.attr("colspan"));
if (isNaN(rowspan)) {
rowspan = 1;
}
if (isNaN(colspan)) {
colspan = 1;
}
var r_ab = luckysheet_select_save[0]["row"][0] + r;
var c_ab = luckysheet_select_save[0]["column"][0] + c;
for (var rp = 0; rp < rowspan; rp++) {
for (var cp = 0; cp < colspan; cp++) {
if (rp == 0) {
var bt = $td.css("border-top");
if (bt != null && bt.length > 0 && bt.substr(0, 3).toLowerCase() != "0px") {
var width = $td.css("border-top-width");
var type = $td.css("border-top-style");
var color = $td.css("border-top-color");
var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);
if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
borderInfo[(r + rp) + "_" + (c + cp)] = {};
}
borderInfo[(r + rp) + "_" + (c + cp)].t = { "style": borderconfig[0], "color": borderconfig[1] };
}
}
if (rp == rowspan - 1) {
var bb = $td.css("border-bottom");
if (bb != null && bb.length > 0 && bb.substr(0, 3).toLowerCase() != "0px") {
var width = $td.css("border-bottom-width");
var type = $td.css("border-bottom-style");
var color = $td.css("border-bottom-color");
var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);
if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
borderInfo[(r + rp) + "_" + (c + cp)] = {};
}
borderInfo[(r + rp) + "_" + (c + cp)].b = { "style": borderconfig[0], "color": borderconfig[1] };
}
}
if (cp == 0) {
var bl = $td.css("border-left");
if (bl != null && bl.length > 0 && bl.substr(0, 3).toLowerCase() != "0px") {
var width = $td.css("border-left-width");
var type = $td.css("border-left-style");
var color = $td.css("border-left-color");
var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);
if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
borderInfo[(r + rp) + "_" + (c + cp)] = {};
}
borderInfo[(r + rp) + "_" + (c + cp)].l = { "style": borderconfig[0], "color": borderconfig[1] };
}
}
if (cp == colspan - 1) {
var br = $td.css("border-right");
if (br != null && br.length > 0 && br.substr(0, 3).toLowerCase() != "0px") {
var width = $td.css("border-right-width");
var type = $td.css("border-right-style");
var color = $td.css("border-right-color");
var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);
if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
borderInfo[(r + rp) + "_" + (c + cp)] = {};
}
borderInfo[(r + rp) + "_" + (c + cp)].r = { "style": borderconfig[0], "color": borderconfig[1] };
}
}
if (rp == 0 && cp == 0) {
continue;
}
data[r + rp][c + cp] = { "mc": { "r": r_ab, "c": c_ab } };
}
}
if (rowspan > 1 || colspan > 1) {
var first = { "rs": rowspan, "cs": colspan, "r": r_ab, "c": c_ab };
data[r][c].mc = first;
}
}
c++;
if (c == colLen) {
return true;
}
});
r++;
});
var index = luckysheet.sheetmanage.getSheetIndex(luckysheet.currentSheetIndex);
var file = luckysheet.getluckysheetfile()[index];
var luckysheet_selection_range = file["luckysheet_selection_range"];
luckysheet_selection_range = [];
luckysheet.selection.pasteHandler(data, borderInfo);
$("#luckysheet-copy-content").empty();
}
</script>
</body>
</html>
探討
僅前端文件導入是不帶單元格樣式的,但是從excel復制單元格到Luckysheet是帶單元格樣式的.可以從 在線demo 嘗試下.
目前Luckysheet功能正在完善中,可以逐步關注.