JS XLS/X的使用心得

最新推荐文章于 2024-03-17 09:44:20 发布

雨降

最新推荐文章于 2024-03-17 09:44:20 发布

阅读量1w

点赞数

分类专栏：前端插件文章标签： excel插件

本文链接：https://blog.csdn.net/u011848397/article/details/52423870

版权

前端插件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

【GitHub】：https://github.com/SheetJS/js-xlsx
【中文API】：http://www.uedsc.com/js-xlsx-api.html
项目中需要用到导入excel文件的功能，在此记录一下使用心得。

从gibhub上下载插件，打开index，查看javascript代码。
这里只研究了”选择文件“的调用过程，即在每个方法的开头”alert(方法名)“，就可以看出调用顺序
我们将Use Web Workers、Use Transferrables、Use readAsBinaryString三个勾选视为123，
下图记录了123不同勾选情况时，选择文件后，内部会调用哪些方法
这里写图片描述
这里可以看出，当23同时勾选时，优先判定3为true；只勾选2时，内部调用的方法比3要多一个fixdata()。
实际上，ie浏览器是不支持第3个选项的。
1勾选时，总是无法显示内容，没仔细研究具体原因。我们可以很容易发现，1的调用步骤和23是有明显区别的，当不需要1时，我们可以去掉很多不必要的方法，且原index的js代码中：

var XW = {
    /* worker message */
    msg: 'xlsx',
    /* worker scripts */
    rABS: './xlsxworker2.js',
    norABS: './xlsxworker1.js',
    noxfer: './xlsxworker.js'
};

也是跟1选项有关，若果不需要可以去掉。

下面贴出我的html代码：

<html lang="zh-CN">
<head>
    <title>测试</title>
    <link href="<%=basePath%>/resources/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=basePath%>/resources/plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <%-- <link href="<%=basePath%>/resources/css/login.css" rel="stylesheet"> --%>
    <style>
    #drop{
        border:2px dashed #bbb;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        padding:25px;
        text-align:center;
        font:20pt bold,"Vollkorn";color:#bbb
    }
    #b64data{
        width:100%;
    }
</style>
</head>
<body>
    <p><input type="file" name="xlfile" id="xlf" /> ... or click here to select a file</p>
    Use Transferrables: (when available) <input type="checkbox" name="xferable" checked><br />
    Use readAsBinaryString: (when available) <input type="checkbox" name="userabs" checked><br />
    <pre id="content"></pre>
    <p id="content2"></p>
<script src="<%=basePath%>/resources/js/jquery-1.11.3.min.js"></script>
<script src="<%=basePath%>/resources/js/jquery.cookie.js"></script>
<script src="<%=basePath%>/resources/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="<%=basePath%>/resources/plugins/xslx/dist/xlsx.core.min.js"></script>
<script>
//ie不支持rABS
var rABS = typeof FileReader !== "undefined" && typeof FileReader.prototype !== "undefined" && typeof FileReader.prototype.readAsBinaryString !== "undefined";
if(!rABS) {
    document.getElementsByName("userabs")[0].disabled = true;
    document.getElementsByName("userabs")[0].checked = false;
}
var transferable = typeof Worker !== 'undefined';
if(!transferable) {
    document.getElementsByName("xferable")[0].disabled = true;
    document.getElementsByName("xferable")[0].checked = false;
}

function fixdata(data) {
    alert("fixdata");
    var o = "", l = 0, w = 10240;
    for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint8Array(data.slice(l*w,l*w+w)));
    o+=String.fromCharCode.apply(null, new Uint8Array(data.slice(l*w)));
    return o;
}

function get_radio_value( radioName ) {
    alert("get_radio_value");
    var radios = document.getElementsByName( radioName );
    for( var i = 0; i < radios.length; i++ ) {
        if( radios[i].checked || radios.length === 1 ) {
            return radios[i].value;
        }
    }
}

function to_json(workbook) {
    alert("to_json");
    var result = {};
    workbook.SheetNames.forEach(function(sheetName) {
        var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        if(roa.length > 0){
            result[sheetName] = roa;
        }
    });
    return result;
}

function process_wb(wb) {
    alert("process_wb");
    var output = JSON.stringify(to_json(wb), 2, 2);//去掉后2个参数，显示结果只有1行，没有缩进
    if(content.innerText === undefined) out.textContent = output;
    else content.innerText = output;
    $("#content2").text(output)    
}

var xlf = document.getElementById('xlf');
function handleFile(e) {
    alert("handleFile");
    rABS = document.getElementsByName("userabs")[0].checked;
    var files = e.target.files;
    var f = files[0];
    {
        var reader = new FileReader();
        var name = f.name;
        reader.onload = function(e) {
            if(typeof console !== 'undefined') console.log("onload", new Date(), rABS);
            var data = e.target.result;
            var wb;
            if(rABS) {
                wb = XLSX.read(data, {type: 'binary'});
            } else {
            var arr = fixdata(data);
                wb = XLSX.read(btoa(arr), {type: 'base64'});
            }
            process_wb(wb);
        };
        if(rABS) reader.readAsBinaryString(f);
        else reader.readAsArrayBuffer(f);
    }
}

if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false);
</script>
</body>
</html>

雨降

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS XLS/X的使用心得

【GitHub】：https://github.com/SheetJS/js-xlsx 【中文API】：http://www.uedsc.com/js-xlsx-api.html 项目中需要用到导入excel文件的功能，在此记录一下使用心得。从gibhub上下载插件，打开index，查看javascript代码。这里只研究了”选择文件“的调用过程，即在每个方法的开头”alert(方法
复制链接

扫一扫