我可以通过FileReader 读取 Excel 文件，但它会输出文本以及奇怪的字符。我需要逐行读取xls 文件，读取每一列中的数据并将其转换为 JSON。
如何逐行读取xls文件？
【问题讨论】：
标签： javascript json html xls filereader
XLS 是 Microsoft 使用的二进制专有格式。如果不使用某些特定的库或 Office 互操作，用服务器端语言解析 XLS 是非常困难的。用 javascript 做到这一点是不可能的任务。感谢 HTML5 File API，您可以读取其二进制内容，但为了解析和解释它，您需要深入了解specifications of the XLS format。从 Office 2007 开始，Microsoft 采用了Open XML 文件格式（Excel 为xslx），这是一种标准。
【讨论】：
var excel=new ActiveXObject("Excel.Application"); var book=excel.Workbooks.Open(your_full_file_name_here.xls); var sheet=book.Sheets.Item(1); var value=sheet.Range("A1");
当你有工作表时。您可以像在 Excel 中一样使用 VBA 函数。
【讨论】：
老问题，但我应该注意，从 javascript 解析 XLS 文件的一般任务是乏味和困难的，但并非不可能。
我有用纯 JS 实现的基本解析器：
两个页面都是 HTML5 文件 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 to JSON javascript code?
【讨论】：
xlsx.js 之前声明 jszip.js 脚本。
此代码可以帮助您
大多数情况下 jszip.js 不起作用，因此请在您的 js 代码中包含 xlsx.full.min.js。
<input type="file" id="file" ng-model="csvFile"
onchange="angular.element(this).scope().ExcelExport(event)"/>
<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>
【讨论】：
如果您想要在浏览器中读取 *.xlsx 文件的最简单和最小的方法，那么这个库可能会：
https://catamphetamine.github.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 文档。
【讨论】：
包括 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 帖子的组合：
祝你好运……
【讨论】：
<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>【讨论】：
感谢上面的回答，我认为（答案的范围）已经完成，但我想为使用 react 的人添加一个“反应方式”。
创建一个名为 importData.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)}/>
);
}
}
然后你可以在 render 方法中使用该组件，如：
import ImportData from './importData.js';
import React, {Component} from 'react';
class ParentComponent extends Component{
render(){
return (<ImportData/>);
}
}
<ImportData/>会将数据设置为自己的状态，您可以通过this访问“父组件”中的Excel数据：
【讨论】：
<ImportData/>而不是<importData/>。我对 React 还很陌生，但我相信组件名称总是大写的。无论如何，这是示例中导入时使用的名称。
这是为 react js 准备的
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"/>
【讨论】：
使用 CDN 和纯 JavaScript 的最简单方法
<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 的最简单方法。
【讨论】：