Vue 前端解析 Excel 資料
阿新 • • 發佈:2022-11-29
想要在前端實現 Excel 表格資料的解析,需要安裝 xlsx 包:
npm install xlsx
然後在需要使用的地方引入:
import * as XLSX from 'xlsx/xlsx.mjs'
使用 Element UI 提供的上傳功能元件對 excel 表格資料進行解析,全部程式碼如下:
<template> <div id="app"> <h2>{{message}}</h2> <el-upload action accept = ".xlsx, .xls" :auto-upload="false" :show-file-list="false" :on-change="handle"> <el-button type="primary">開啟excel</el-button> </el-upload> </div> </template> <script> import * as XLSX from 'xlsx/xlsx.mjs' export default { name: 'App', data(){ return { message:' XLSX 的使用' } }, methods:{ readFile(file){//檔案讀取 return new Promise(resolve => { let reader = new FileReader(); reader.readAsBinaryString(file);//以二進位制的方式讀取 reader.onload = ev =>{ resolve(ev.target.result); } }) }, async handle(ev){ let file = ev.raw; console.log(file) if(!file){ console.log("檔案開啟失敗") return ; }else{ let data = await this.readFile(file); let workbook = XLSX.read(data,{ type: "binary"});//解析二進位制格式資料 console.log('二進位制資料的解析:') console.log(workbook) let worksheet = workbook.Sheets[workbook.SheetNames[0]];//獲取第一個Sheet let result = XLSX.utils.sheet_to_json(worksheet);//json資料格式 console.log('最終解析的 json 格式資料:') console.log(result) } } } } </script> <style> </style>
原始表格資料:實驗資料.xls
執行結果: