[英]Import Excel to Html Table Using Jquery and Ajax
我正在嘗試使用 Jquery 將 excel 文件導入 HTML 表。 我已經嘗試了下面的代碼。 我還需要做其他事情嗎? 上傳的文件尚未顯示在表格中。 請協助。
下面是腳本
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);
productList = JSON.parse(json_object);
var rows = $('#tblItems tbody tr',);
console.log(productList)
for (i = 0; i < productList.length; i++) {
var columns = Object.values(productList[i])
rows.eq(i).find('td').text(columns[0]);
rows.eq(i).find('td').text(columns[1]);
rows.eq(i).find('td').text(columns[2]);
rows.eq(i).find('td').text(columns[3]);
rows.eq(i).find('td').text(columns[4]);
}
})
};
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]);
}
document.getElementById('fileupload').addEventListener('change', handleFileSelect, false);
下面是 HTML
<div class="w3-col w3-half">
<div class="form-group">
<input id="fileupload" type=file name="files[]">
</div>
</div>
<div class="w3-responsive">
@*<h2 class="w3-center"><strong>All Items in Stock </strong></h2>*@
<table id="tblItems" class="table w3-table-all w3-hoverable">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Cost Price</th>
<th>Sales Price</th>
<th>Item Discontinued?</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
嘗試上傳 excel 文件后,它什么也不做,導入的 excel 文件不會顯示在為其指定的表上。
請嘗試此代碼
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) { var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]); var productList = JSON.parse(JSON.stringify(XL_row_object)); var rows = $('#tblItems tbody'); // console.log(productList) for (i = 0; i < productList.length; i++) { var columns = Object.values(productList[i]) rows.append(` <tr> <td>${columns[0]}</td> <td>${columns[1]}</td> <td>${columns[2]}</td> <td>${columns[3]}</td> <td>${columns[4]}</td> </tr> `); } }) }; 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]); } document.getElementById('fileupload').addEventListener('change', handleFileSelect, false);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.0/dist/xlsx.full.min.js"></script> <div class="w3-col w3-half"> <div class="form-group"> <input id="fileupload" type=file name="files[]"> </div> </div> <div class="w3-responsive"> <h2 class="w3-center"><strong>All Items in Stock </strong></h2> <table id="tblItems" class="table w3-table-all w3-hoverable"> <thead> <tr> <th>Item ID</th> <th>Item Name</th> <th>Cost Price</th> <th>Sales Price</th> <th>Item Discontinued?</th> </tr> </thead> <tbody></tbody> </table> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.