JS讀取Excel數據

為什么要導入Excel數據，在所有的系統中幾乎都會涉及到添加數據功能，添加數據有兩種方法，第一種就是手動輸入，一次只能輸入一條數據。另一種就是通過導入excel文件實現多條數據的添加。
接下來我們就通過一個例子來實現excel數據的導入

1、示例代碼

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><el-row><el-col><el-uploadref="upload"action="/":show-file-list="false":on-change="(file, fileList) => {batchImport(file, fileList,importHeader)}":auto-upload="false"style="margin-left: 30px;width:130px"><el-buttonstyle="width: 130px"type="primary"plainicon="el-icon-upload2"class="handle-del">批量導入</el-button></el-upload></el-col></el-row></div> </template><script> import XLSX from "xlsx"; export default {name: 'HelloWorld',data () {return {xlsxJson: {},importHeader:["姓名","年齡"],msg: 'Welcome to Your Vue.js App'}},methods:{batchImport(file, fileList,header) {// let file = file.files[0] // 使用傳統的input方法需要加上這一步const types = file.name.split(".")[1];const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some((item) => item === types);if (!fileType) {alert("格式錯誤！請重新選擇");return;}this.file2Xce(file,header).then((tabJson) => {if (tabJson && tabJson.length > 0) {this.xlsxJson = tabJson;}this.setLedgerList();});},setLedgerList() {let data = [];this.xlsxJson[0].sheet.forEach((item) => {data.push(item);});console.log(data)// 這個data就可以傳給后端，存入數據了},file2Xce(file,header) {return new Promise(function (resolve, reject) {const reader = new FileReader();reader.onload = function (e) {const data = e.target.result;// XLSX.read返回值為WorkBook對象，包含整個文件的所有表this.wb = XLSX.read(data, {type: "binary",});const result = [];//SheetNames包含了文件中所有的表明this.wb.SheetNames.forEach((sheetName) => {result.push({sheetName: sheetName,sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName], {//header是設置表屬性名，如果設置為數字，則屬性名由0，1，2...表示//此處設置的header為importHeader:["姓名","年齡"],最終結果的屬性名對應該數組header: header,}),});});console.log("result")console.log(result)//將excel文件第一張表的第一項(excel的第一行為屬性名，應該去掉)刪除result[0].sheet.shift();resolve(result);};reader.readAsBinaryString(file.raw);// reader.readAsBinaryString(file) // 傳統input方法});},} } </script>

2、結果分析

2.1素材

excel文件包含兩張表
表一

表二

2.2代碼解析及結果

file2Xce函數獲取兩張表的數據
結果
解析到excel文件的兩張表

每個表都有兩個屬性：
sheet：表的數據
sheetName:表的名字

第一張表內數據，如果file2Xce函數不加header參數，就不會顯示屬性名（紅色箭頭標記處）

setLedgerList函數將表中數據存放在data中，作為后續請求鏈接的data,傳遞給后端。

3、總結

這里的file2Xce函數只是去掉了第一張表的第一行屬性值，第二張表沒有做處理，所以setLedgerList只是把第一張表的數值傳遞給了data。
在這個例子中有點瑕疵：本次舉例使用的兩張表的字段不同，正常情況下兩張表的字段應該是相同的，這樣就可以通過forEach實現對多表的操作，即將兩張表的數據都存到data中。

總結

以上是生活随笔為你收集整理的Vue使用js读取Excel数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。