如何在Javascript/HTML5中解析Excel（XLS）文件

我可以通过

FileReader

读取Excel文件，但它会输出文本以及奇怪的字符。我需要按行读取

xls

文件，读取每列中的数据并将其转换为JSON

---

如何逐行读取xls文件？

xls是Microsoft使用的二进制专有格式。如果不使用特定的库或办公室互操作，使用服务器端语言解析XLS是非常困难的。用javascript实现这一点是不可能的。多亏了HTML5文件API，您可以读取其二进制内容，但为了解析和解释它，您需要深入研究。从Office2007开始，微软采用了文件格式（

xslx

for Excel），这是一种标准； var book=excel.Workbooks.Open（您的\u完整\u文件名\u here.xls）； var表=账簿表项目（1）； var值=表范围（“A1”）

---

当你拿到床单的时候。您可以像在Excel中一样使用VBA函数。

这是一个老问题，但我应该注意到，从javascript解析XLS文件的一般任务既繁琐又困难，但并非不可能

我用纯JS实现了基本的解析器：

• （XLS文件，您想要的）
• （XLSX/XLSM/XLSB文件）

这两个页面都是HTML5文件API驱动的XLS/XLSX解析器（您可以拖放文件，它将以逗号分隔的列表打印单元格中的数据）。您还可以生成JSON对象（假设第一行是标题行）

---

测试套件显示了一个使用XHR获取和解析文件的版本。

下面的函数将Excel工作表（XLSX格式）数据转换为JSON。您可以向函数添加承诺

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {

  this.parseExcel = function(file) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var data = e.target.result;
      var workbook = XLSX.read(data, {
        type: 'binary'
      });

      workbook.SheetNames.forEach(function(sheetName) {
        // Here is your object
        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        var json_object = JSON.stringify(XL_row_object);
        console.log(json_object);

      })

    };

    reader.onerror = function(ex) {
      console.log(ex);
    };

    reader.readAsBinaryString(file);
  };
};
</script>

var ExcelToJSON=function（）{
this.parseExcel=函数（文件）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var数据=e.target.result；
变量工作簿=XLSX.read（数据{
键入：“二进制”
});
工作簿.SheetNames.forEach（函数（sheetName）{
//这是你的物品
var XL_row_object=XLSX.utils.sheet_to_row_object_数组（workbook.Sheets[sheetName]）；
var json\u object=json.stringify（XL\u row\u object）；
log（json_对象）；
})
};
reader.onerror=函数（ex）{
控制台日志（ex）；
};
reader.readAsBinaryString（文件）；
};
};

---

下面的帖子有XLS格式的代码

这段代码在jszip.js无法正常工作的大多数情况下都可以帮助您
因此在js代码中包含xlsx.full.min.js

Html代码

Javascript

$scope.ExcelExport=函数（事件）{
var输入=event.target；
var reader=new FileReader（）；
reader.onload=函数（）{
var fileData=reader.result；
var wb=XLSX.read（fileData，{type:'binary'}）；
wb.SheetNames.forEach（函数（sheetName）{
var rowObj=XLSX.utils.sheet_到_row_object_数组（wb.Sheets[sheetName]）；
var jsonObj=JSON.stringify（rowObj）；
console.log（jsonObj）
})
};
reader.readAsBinaryString（input.files[0]）；
};

如果您想知道如何从服务器读取文件，此代码可能会有所帮助

限制：

文件应位于服务器中（本地/远程）

你将不得不设置标题或有CORS谷歌插件

/*设置XMLHttpRequest*/
//将其替换为本地服务器中的文件路径
变量url=”http://localhost/test.xlsx";
var oReq=新的XMLHttpRequest（）；
open（“GET”，url，true）；
oReq.responseType=“arraybuffer”；
oReq.onload=函数（e）{
var arraybuffer=oReq.响应；
/*将数据转换为二进制字符串*/
var数据=新的Uint8Array（arraybuffer）；
var arr=新数组（）；
对于（变量i=0；i！=data.length；++i）{
arr[i]=String.fromCharCode（数据[i]）；
}
var bstr=arr.join（“”）；
var cfb=XLSX.read（bstr，{type:'binary'}）；
cfb.SheetNames.forEach（函数（sheetName，index）{
//以CSV格式获取当前行
var fieldsObjs=XLS.utils.sheet_to_json（cfb.Sheets[sheetName]）；
fieldsObjs.map（函数（字段）{
$（“#我的文件_输出”）.append（“”+field.Fields+“
”）；
});
});
}
oReq.send（）；

如果您希望以最简单、最微小的方式在浏览器中读取*.xlsx文件，则此库可能会执行以下操作：

从“读取excel文件”导入ReadXLSX文件
常量输入=document.getElementById（'input'）
input.addEventListener（'change'，（）=>{
readXlsxFile（input.files[0]）。然后（（数据）=>{
//'data'是一个行数组
//每行是一个单元格数组。
})
})

在上面的示例中，

数据

是原始字符串数据。 通过传递

schema

参数，可以使用严格的模式将其解析为JSON。请参见API文档以获取该示例

API文档：

---

包括xslx.js、xlsx.full.min.js、jszip.js

将onchange事件处理程序添加到文件输入

function showDataExcel(event)
{
            var file = event.target.files[0];
            var reader = new FileReader();
            var excelData = [];
            reader.onload = function (event) {
                var data = event.target.result;
                var workbook = XLSX.read(data, {
                    type: 'binary'
                });

                workbook.SheetNames.forEach(function (sheetName) {
                    // Here is your object
                    var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);

                    for (var i = 0; i < XL_row_object.length; i++)
                    {
                        excelData.push(XL_row_object[i]["your column name"]);

                    }

                    var json_object = JSON.stringify(XL_row_object);
                    console.log(json_object);
                    alert(excelData);
                })

            };

            reader.onerror = function (ex) {
                console.log(ex);
            };

            reader.readAsBinaryString(file);

}

函数showDataExcel（事件）
{
var file=event.target.files[0]；
var reader=new FileReader（）；
var excelData=[]；
reader.onload=函数（事件）{
var数据=event.target.result；
变量工作簿=XLSX.read（数据{
键入：“二进制”
});
工作簿.SheetNames.forEach（函数（sheetName）{
//这是你的物品
var XL_row_object=XLSX.utils.sheet_to_row_object_数组（workbook.Sheets[sheetName]）；
对于（变量i=0；i<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js">
</script>

$scope.ExcelExport= function (event) {


    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});

        wb.SheetNames.forEach(function(sheetName){
        var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
        var jsonObj = JSON.stringify(rowObj);
        console.log(jsonObj)
        })
    };
    reader.readAsBinaryString(input.files[0]);
    };

<Head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.4/xlsx.core.min.js"></script>
</head>

<body>
    <script>
    /* set up XMLHttpRequest */


    // replace it with your file path in local server
    var url = "http://localhost/test.xlsx";

    var oReq = new XMLHttpRequest();
    oReq.open("GET", url, true);
    oReq.responseType = "arraybuffer";

    oReq.onload = function(e) {
        var arraybuffer = oReq.response;

        /* convert data to binary string */
        var data = new Uint8Array(arraybuffer);

        var arr = new Array();
        for (var i = 0; i != data.length; ++i) {
            arr[i] = String.fromCharCode(data[i]);
        }

        var bstr = arr.join("");

        var cfb = XLSX.read(bstr, { type: 'binary' });

        cfb.SheetNames.forEach(function(sheetName, index) {

            // Obtain The Current Row As CSV
            var fieldsObjs = XLS.utils.sheet_to_json(cfb.Sheets[sheetName]);

            fieldsObjs.map(function(field) {
                $("#my_file_output").append('<input type="checkbox" value="' + field.Fields + '">' + field.Fields + '<br>');
            });

        });
    }

    oReq.send();
    </script>
</body>
<div id="my_file_output">
</div>

</html>

function showDataExcel(event)
{
            var file = event.target.files[0];
            var reader = new FileReader();
            var excelData = [];
            reader.onload = function (event) {
                var data = event.target.result;
                var workbook = XLSX.read(data, {
                    type: 'binary'
                });

                workbook.SheetNames.forEach(function (sheetName) {
                    // Here is your object
                    var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);

                    for (var i = 0; i < XL_row_object.length; i++)
                    {
                        excelData.push(XL_row_object[i]["your column name"]);

                    }

                    var json_object = JSON.stringify(XL_row_object);
                    console.log(json_object);
                    alert(excelData);
                })

            };

            reader.onerror = function (ex) {
                console.log(ex);
            };

            reader.readAsBinaryString(file);

}

import React, {Component} from 'react';
import XLSX from 'xlsx';
export default class ImportData extends Component{
    constructor(props){
        super(props);
        this.state={
            excelData:{}
        }
    }
    excelToJson(reader){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});
        var data = {};
        wb.SheetNames.forEach(function(sheetName){
             var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
             var rowString = JSON.stringify(rowObj);
             data[sheetName] = rowString;
        });
        this.setState({excelData: data});
    }
    loadFileXLSX(event){
        var input = event.target;
        var reader = new FileReader();
        reader.onload = this.excelToJson.bind(this,reader);
        reader.readAsBinaryString(input.files[0]);
    }
    render(){
        return (
            <input type="file" onChange={this.loadFileXLSX.bind(this)}/>
        );
    }
}

import ImportData from './importData.js';
import React, {Component} from 'react';
class ParentComponent extends Component{
    render(){
        return (<ImportData/>);
    }
}

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import * as XLSX from "xlsx";

function App() {
  const [items, setItems] = useState([]);

  const readExcel = (file) => {
    const promise = new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(file);

      fileReader.onload = (e) => {
        const bufferArray = e.target.result;

        const wb = XLSX.read(bufferArray, { type: "buffer" });

        const wsname = wb.SheetNames[0];

        const ws = wb.Sheets[wsname];

        const data = XLSX.utils.sheet_to_json(ws);

        resolve(data);
      };

      fileReader.onerror = (error) => {
        reject(error);
      };
    });

    promise.then((d) => {
      setItems(d);
    });
  };

  return (
    <div>
      <input
        type="file"
        onChange={(e) => {
          const file = e.target.files[0];
          readExcel(file);
        }}
      />

      <table class="table container">
        <thead>
          <tr>
            <th scope="col">Item</th>
            <th scope="col">Description</th>
          </tr>
        </thead>
        <tbody>
          {items.map((d) => (
            <tr key={d.Item}>
              <th>{d.Item}</th>
              <td>{d.Description}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

readExcelFile = async ( file ) =>
{

    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer( file );

    fileReader.onload = ( e ) =>
    {
        const bufferArray = e.target.result;

        const wb = XLSX.read( bufferArray, { type: "buffer" } );

        const wsname = wb.SheetNames[ 0 ];

        const ws = wb.Sheets[ wsname ];

        const data = XLSX.utils.sheet_to_json( ws );
        console.log(data);
    };

};
            <input type="file" name="excelfile" id="excelfile"  readExcelFile(file)>