如何在 Javascript/HTML5中解析 Excel (XLS)文件

我能够通过 FileReader读取 Excel 文件，但它输出的文本以及怪异的字符与它。我需要按行读取 xls文件，读取每列中的数据并将其转换为 JSON。

如何逐行读取 xls 文件？

555542 次浏览
小开

XLS 是微软使用的二进制专有格式。如果不使用某些特定的库或 OfficeInterop，那么使用服务器端语言解析 XLS 是非常困难的。用 javascript 完成这个任务是不可能的。由于 HTML5文件 API，您可以读取其二进制内容，但为了解析和解释它，您将需要潜入到 XLS 格式规范。从 Office2007开始，微软采用了标准的 打开 XML文件格式(用于 Excel 的 xslx)。

小开

Var Excel = new ActiveXObject (“ Excel. Application”) ; 打开(your _ full _ file _ name _ here. xls) ; 变量表 = 书。表。项目(1) ; 范围(“ A1”) ;

你可以像在 Excel 中一样使用 VBA 函数。

小开

这是个老问题了，但是我应该指出，从 javascript 解析 XLS 文件的一般任务是乏味和困难的，但并非不可能完成。

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

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

测试套件 http://oss.sheetjs.com/显示了一个使用 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>

下面的帖子有 XLS 格式 从 Excel 到 JSON 的 javascript 代码？的代码

小开

这段代码可以帮助您 < br > 大多数时候 jszip.js 不工作，所以在 js 代码中包含 xlsx.full.min.js。

HTML 代码

 <input type="file" id="file" ng-model="csvFile"
onchange="angular.element(this).scope().ExcelExport(event)"/>

Javascript

<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]);
};
小开

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

限制:

  1. 文件应该在服务器中(本地/远程)。
  2. 你将不得不设置标题或 CORS 谷歌插件。

<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>
小开

如果你想用最简单最微小的方式来解读 * 。Xlsx 文件，然后这个库可能做:

Https://catamphetamine.gitlab.io/read-excel-file/

<input type="file" id="input" />

import readXlsxFile from 'read-excel-file'


const input = document.getElementById('input')


input.addEventListener('change', () => {
readXlsxFile(input.files[0]).then((data) => {
// `data` is an array of rows
// each row being an array of cells.
})
})

在上面的例子中，data是原始字符串数据。 通过传递 schema参数，可以使用严格的模式将其解析为 JSON。有关这方面的例子，请参阅 API 文档。

空气污染指数文件: Http://npmjs.com/package/read-excel-file

小开

包括 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);


}
小开

在这里上传一个 excel file，你可以在 console中获得 JSON格式的数据:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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.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.parse(json_object));
jQuery('#xlx_json').val(json_object);
})
};


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


reader.readAsBinaryString(file);
};
};


function handleFileSelect(evt) {


var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
</script>


<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>


<textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>


<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>

这是以下 Stackoverflow职位的组合:

  1. Https://stackoverflow.com/a/37083658/4742733
  2. Https://stackoverflow.com/a/39515846/4742733

祝你好运..。

小开 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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.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.parse(json_object));
jQuery( '#xlx_json' ).val( json_object );
})
};


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


reader.readAsBinaryString(file);
};
};


function handleFileSelect(evt) {
    

var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}




 

</script>


<form enctype="multipart/form-data">
<input id="upload" type=file  name="files[]">
</form>


<textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>


<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);


</script>

小开

谢谢你的答案以上，我认为范围(的答案)已经完成，但我想添加一个“反应方式”为谁使用反应。

创建一个名为 import Data.js 的文件:

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/>);
}
}

<ImportData/>会将数据设置为自己的状态，您可以通过以下 这个来访问“父组件”中的 Excel 数据:

小开

这是给“反应”的

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)>
小开

下面的代码将使用 Javascript 读取 XLSX 文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>


<script>


function handleFile(e)
{
//Get the files from Upload control
var files = e.target.files;
var i, f;


var title;
var choice;


//Loop through files
for (i = 0, f = files[i]; i != files.length; ++i)
{
var reader = new FileReader();
var name = f.name;
reader.onload = function(e)
{
debugger;
var data = e.target.result;


var result;
var workbook = XLSX.read(data,
{
type: 'binary'
});


var sheet_name_list = workbook.SheetNames;
var roa;
sheet_name_list.forEach(function(y)
{
/* iterate through sheets */
//Convert the cell value to Json
roa = XLSX.utils.sheet_to_json(workbook.Sheets[y]);
if (roa.length > 0)
{
result = roa;
}
});
};
reader.readAsArrayBuffer(f);
}
}


$(document).ready(function()
{
$('#files').change(handleFile);
});


</script>
<input type="file" id="files" name="files"/>
小开

使用带有普通 javascript 的 CDN 实现的最简单方法

<script src="https://unpkg.com/read-excel-file@5.x/bundle/read-excel-file.min.js"></script>
<html>
<h1>read-excel-file</h1>
</html>
<script>
var input = document.createElement("INPUT");
input.setAttribute("type", "file");
document.body.appendChild(input)
input.addEventListener('change', function() {
readXlsxFile(input.files[0]).then(function(rows) {
console.log(rows)
})
})
</script>

使用普通 javascript 的最简单方法。

小开

从 FileReader API 中读取 Excel 文件得到的奇怪字符来自文件的结构，该结构与文本文件有很大不同。

所以用 FileReader API 把它读成 text会给这些奇怪的字符一个结果。

您可以使用 FileReader API 将其读取为 binary string。
在这一点上，如果你试图记录该 binary string你也会得到奇怪的字符。

为了获得文件内容，您需要解析该 binary string来提取它所包含的数据。这可以很容易地做到这一点使用 SheetJS。

import { read, writeFileXLSX, utils } from "https://cdn.sheetjs.com/xlsx-0.18.7/package/xlsx.mjs";


const workbook = read(data, {
type:'binary',
});

data是通过使用 FileReaderAPI 将 Excel 文件读取为 binary string而产生的 binary string。

workbook是一个包含文件所有数据的对象。

workbook.Sheets指令将允许您访问文件中的所有 sheets。

workbook.Sheets.sheet1将允许您访问文件的第一个 sheet的内容。

所有相关的数组都来自 {key:value}类型。

以这种方式访问的 sheet的内容是一个单维的 object array，其中包含从头的第一个单元格到包含数据的最后一个单元格的所有 sheet单元格。每个细胞都有一个像 'A1'、 'B250'、 'J3'这样的密钥

这个数组还有另外两个条目，键为 '!margin'和 '!ref':
'!margin'指的是单元格边距，因此它可能不代表任何利息。
'!ref'更有意思，因为它包含一个包含数据的单元格区域，这个区域是 string < br > ，就像这个 'A1:J215'一样，你可以从中得到最后一列的行数或者 char。译注:

如果需要更多信息，可以查看 SheetJS文档，这里有一个更详细的示例: 如何在客户端读取 Excel 文件内容？

注:
如果您想在 html页面中使用这个 import 语句，那么您需要在这些脚本 tags: <script type="module" defer> ... </script>中使用它

下面是一个 Codepen，您可以在其中测试此方法。只有最基本的方法。通过使用 SheetJSutils函数将 sheet内容直接转换为另一种格式，可以使用一些较短的方法来完成同样的操作。

小开 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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.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.parse(json_object));
jQuery('#xlx_json').val(json_object);
})
};


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


reader.readAsBinaryString(file);
};
};


function handleFileSelect(evt) {


var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
</script>


<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>


<textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>


<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>


提交答案