我們常常需要從Excel表格導入數據,然而并不是所有項目都有后端支持或者支持了需一系列繁瑣的數據轉換。這時就可以借助JavaScript來實現Excel的導入。
我們使用SheetJS這個JavaScript庫來實現。SheetJS支持各種格式的Excel文件,包括.xlsx、.xls、.ods、.csv等。我們來看一下如何使用SheetJS實現Excel導入。
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script>
<input type="file" id="excelFile" onchange="loadExcel()">
<script>
function loadExcel() {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
var sheetName = workbook.SheetNames[0];
var worksheet = workbook.Sheets[sheetName];
var rows = XLSX.utils.sheet_to_row_object_array(worksheet);
console.log(rows);
};
reader.readAsBinaryString(excelFile.files[0]);
}
</script>
以上代碼實現了一個簡單的Excel導入功能。我們通過<input>標簽讓用戶選擇Excel文件。當用戶選擇了文件后,我們用FileReader對象讀取文件內容,再用SheetJS庫的XLSX.read()方法解析Excel文件。然后我們讀取第一個sheet的內容,并將其轉換成一個對象數組。
我們可以將這些數據存儲到本地緩存或發送到后端處理。下面的代碼展示了如何將Excel數據發送到后端。
<script>
function loadExcel() {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
var sheetName = workbook.SheetNames[0];
var worksheet = workbook.Sheets[sheetName];
var rows = XLSX.utils.sheet_to_row_object_array(worksheet);
fetch('/api/save_excel_data', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(rows)
})
.then(response =>response.json())
.then(data =>console.log(data))
.catch(error =>console.error(error));
};
reader.readAsBinaryString(excelFile.files[0]);
}
</script>
以上代碼通過Fetch API將Excel數據發送到后端。我們將數據轉換成JSON格式,并將其放入Fetch API中的body參數。后端通過request.body接收這些數據,并對其進行處理。處理完之后,我們可以將處理結果通過response.send()或response.json()返回給前端。
除了SheetJS外,還有其他的JavaScript庫可以實現Excel導入功能。比如,js-xlsx、exceljs、xlsx-populate等。這些庫的使用方法大同小異,我們可以根據自己的需求選擇使用哪個庫。
總之,借助JavaScript實現Excel導入功能是一種方便、快捷的方法。通過學習以上代碼,我們可以了解到如何使用SheetJS實現Excel導入,并將數據發送到后端進行處理。