问题
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/li
最低0.47元/天 解锁文章
1300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
