js前端解析excel文件

本文轉載自查看原文 2017-02-16 21:46 38627 JavaScript

使用純Javascript解析excel文件。

使用的是開源的解析excel的js庫：sheetjs。github地址：https://github.com/SheetJS/js-xlsx

首先引用JS庫

<script src="od.js"></script>
<script src="jszip.js"></script>
<script src="xlsx.js"></script>

放置頁面組件

<body>
    <div id="drop">Drop an XLSX / XLSM / XLSB / ODS / XLS / XML file here to see sheet data</div>
    <p><input type="file" name="xlfile" id="xlf" /> ... or click here to select a file</p>
</body>

頁面效果如下：

給dom元素添加監聽

function addLis() {
    var xlf = document.getElementById('xlf');
    var drop = document.getElementById('drop');
    drop.addEventListener("dragenter", handleDragover, false);
    drop.addEventListener("dragover", handleDragover, false);
    drop.addEventListener("drop", onDropDown, false);
    if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false);
}

addLis();

function handleDragover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
}

function onDropDown(e) {
    e.stopPropagation();
    e.preventDefault();
    var files = e.dataTransfer.files;
    var f = files[0];
    readFile(f);
}

function handleFile(e) {
    var files = e.target.files;
    var f = files[0];
    readFile(f);
}

讀取文檔並輸出到控制台：

function readFile(file) {

    var name = file.name;
    var reader = new FileReader();
    reader.onload = function (e) {
        var data = e.target.result;
        var wb = XLSX.read(data, { type: "binary" });
        console.log(wb);
    };
    reader.readAsBinaryString(file);
}

輸出示例：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js 解析本地Excel文件！使用 xlsx 前端解析 excel 文件 js前端讀寫文件的方法（json、excel） js實現前端導出大文件Excel 利用sheet.js解析excel文件前端js下載excel 前端js實現導出大量數據的excel文件 excel文件上傳解析用Java解析Excel文件前端解析zip文件