【发布时间】：2020-01-02 04:20:45
【问题描述】：
我正在使用 XLSX 文件将其转换为 JSON，以便他们创建一个动态表格以在 HTML 中显示。我对 JSON 有点陌生，所以请多多包涵。
<!DOCTYPE html>
<html>
<head>
<title>Convert JSON Data to HTML Table</title>
<style>
th,
td,
p,
input {
font: 14px Verdana;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<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 json_object = {};
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]);
json_object = JSON.stringify(XL_row_object);
document.getElementById("fileContent").innerHTML = json_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]);
}
function CreateTableFromJSON() {
// EXTRACT VALUE FOR HTML HEADER.
// ('Book ID', 'Book Name', 'Category' and 'Price')
var col = [];
for (var i = 0; i < json_object.length; i++) {
for (var key in json_object[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < json_object.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = json_object[i][col[j]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
</script>
<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<p id="showData"></p>
<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>
<pre id="fileContent"></pre>
<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>我想要的是将 JSON 输出转换为动态表。我试过手动输入一组数据并且我能够得到一个表。还尝试先在 xlsx 表上输出数据
document.getElementById("fileContent").innerHTML = myBooks;
我可以看到 JSON 字符串
【问题讨论】：
-
您已经告诉我们您想要什么...但是问题是什么？当您尝试时，您的代码当前出了什么问题？另外...是否有任何特定原因需要将数据转换为 JSON 的中间步骤？为什么不直接根据您阅读的 Excel 数据创建 HTML 表格？
-
将其变成可运行的 sn-p 后，您的主要问题之一（可能还有其他问题尚未发现）更清楚的是
myBooks未在ExcelToJSON函数之外定义，因此无法从CreateTableFromJSON函数访问。 a) 让 CreateTableFromJSON 接受 myBooks 数组作为输入参数并 b) 在 ExcelToJSON 成功读取文件后立即从内部调用 CreateTableFromJSON，而不是等待单独的按钮按下，这难道没有意义吗？ （尽管我在上面提到了使用 JSON 的必要性） -
好的，所以我将
json_object设为全局，但我收到了一个单列表，其中只有我的 JSON 字符串。如果我手动设置对象值，我可以获得我想要的表类型。例如添加var json_object = [ { "Book ID": "1", "Book Name": "Computer Architecture", "Category": "Computers", "Price": "125.60" }, { "Book ID": "2", "Book Name": "Asp.Net 4 Blue Book", "Category": "Programming", "Price": "56.00" } ] -
我还将最初的帖子更新为我现在正在使用的@ADyson
-
啊，好的，我现在看到了这个问题。答案添加在下面
标签： javascript html json html-table xlsx