var oFileIn;
$(function() {
oFileIn = document.getElementById('my_file_input');
if(oFileIn.addEventListener) {
oFileIn.addEventListener('change', filePicked, false);
}
});
function filePicked(oEvent) {
// Get The File From The Input
var oFile = oEvent.target.files[0];
var sFilename = oFile.name;
// Create A File Reader HTML5
var reader = new FileReader();
// Ready The Event For When A File Gets Selected
reader.onload = function(e) {
var data = e.target.result;
var cfb = XLS.CFB.read(data, {type: 'binary'});
var wb = XLS.parse_xlscfb(cfb);
// Loop Over Each Sheet
wb.SheetNames.forEach(function(sheetName) {
// Obtain The Current Row As CSV
var sCSV = XLS.utils.make_csv(wb.Sheets[sheetName]);
var oJS = XLS.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
$("#my_file_output").html(sCSV);
console.log(oJS)
});
};
// Tell JS To Start Reading The File.. You could delay this if desired
reader.readAsBinaryString(oFile);
}
<!doctype html>
<html>
<head>
<title>Excel to JSON Demo</title>
<script src="xlsx.full.min.js"></script>
</head>
<body>
<script>
/* set up XMLHttpRequest */
var url = "http://myclassbook.org/wp-content/uploads/2017/12/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("");
/* Call XLSX */
var workbook = XLSX.read(bstr, {
type: "binary"
});
/* DO SOMETHING WITH workbook HERE */
var first_sheet_name = workbook.SheetNames[0];
/* Get worksheet */
var worksheet = workbook.Sheets[first_sheet_name];
console.log(XLSX.utils.sheet_to_json(worksheet, {
raw: true
}));
}
oReq.send();
</script>
</body>
</html>
function fileReader(oEvent) {
var oFile = oEvent.target.files[0];
var sFilename = oFile.name;
var reader = new FileReader();
var result = {};
reader.onload = function (e) {
var data = e.target.result;
data = new Uint8Array(data);
var workbook = XLSX.read(data, {type: 'array'});
console.log(workbook);
var result = {};
workbook.SheetNames.forEach(function (sheetName) {
var roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {header: 1});
if (roa.length) result[sheetName] = roa;
});
// see the result, caution: it works after reader event is done.
console.log(result);
};
reader.readAsArrayBuffer(oFile);
}
// Add your id of "File Input"
$('#fileUpload').change(function(ev) {
// Do something
fileReader(ev);
}
5条答案
按热度按时间hc2pp10m1#
注意：并非100%跨浏览器
**检查浏览器兼容性@**http：caniuse.com/#search=FileReader
正如你会看到人们有问题与不太常见的浏览器，但这可能归结为浏览器的版本..我总是建议使用类似caniuse看看什么一代的浏览器是支持的...这只是一个工作的答案，为用户，而不是一个最终的复制和粘贴代码，人们只是使用..
小提琴：http://jsfiddle.net/d2atnbrt/3/
HTML代码：
JS代码：
这也需要将https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.js转换为可读格式，我还使用了jquery，仅用于更改div内容和dom ready事件..因此不需要jquery
这是我能找到的最基本的了
编辑-生成表格
小提琴：http://jsfiddle.net/d2atnbrt/5/
这是一个生成您自己的表的例子，这里的关键是使用sheet_to_json以正确的格式获取数据以供JS使用。
第二个小提琴中的一个或两个注解可能不正确，因为第一个小提琴的修改版本。CSV注解至少为
测试XLS文件：http://www.whitehouse.gov/sites/default/files/omb/budget/fy2014/assets/receipts.xls
这并不包括XLSX文件的思想，它应该是相当容易调整为他们使用他们的例子。
nxagd54h2#
js-xlsx库使得将Excel/CSV文件转换为JSON对象变得很容易。
从here下载xlsx.full.min.js文件。在HTML页面上编写以下代码编辑引用的js文件链接（xlsx.full.min.js）和Excel文件链接
输入：
输出：
h7wcgrx33#
这些答案在xls格式下可以很好地工作，但是在我的例子中，它不适用于xlsx。因此我在这里添加了一些代码。它既适用于xls格式，也适用于xlsx。
我从官方样品链接拿的样品。
希望能有所帮助！
goucqfw64#
@Kwang-Chun Kang非常感谢Kang！我发现这个解决方案很有用，它真的保存我一天。对我来说，我正在尝试创建一个React.js组件，当用户上传Excel文件到html输入标签时，它会将 *.xlsx转换为json对象。首先我需要安装XLSX包，其中包括：
然后在我的组件代码中，导入：
组件UI应如下所示：
它调用了一个函数fileReader（），这个函数和提供的解决方案完全一样。要了解更多关于fileReader API的信息，我发现这个博客很有帮助：https://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
dhxwm5r45#
这是我对https://stackoverflow.com/a/52237535/5079799的扩展
虽然这是一个很好的例子，但我没有使用输入表单，而是从URL中获取，而且在fething工作簿之后我还有其他事情要做，所以我需要将
onloadPackage 成promise。请参阅--〉adjust onload function to be used with async/await
这是我最后的结果
第一个