最近在寫一個人力資源管理系統，主要目的是將本地的excel文件讀取解析，將有效數據傳到后臺。

下文介紹流程，文末附有參考文章。

1、安裝npm包xlsx

yarn add xlsx

2、結合上傳組件和自己寫的讀取方法readXLSX，可以進行本地excel讀取。
我使用的語言是vue，代碼如下：

<template><div><Upload action="" :before-upload="beforeUpload"><Button icon="ios-cloud-upload-outline">上傳Excel文件</Button></Upload></div> </template> <script> import XLSX from 'xlsx' function readXLSX (file) {let nameSplit = file.name.split('.')let format = nameSplit[nameSplit.length - 1]if (!['xlsx', 'csv'].includes(format)) {return false}return new Promise((resolve, reject) => {let reader = new FileReader()reader.readAsBinaryString(file)reader.onload = function (evt) {let data = evt.target.result // 讀到的數據var workbook = XLSX.read(data, { type: 'binary' })resolve(workbook)}}) } export default {methods: {async beforeUpload (file) {const workbook = await readXLSX(file)console.log(workbook)return false}} } </script>

3、其實問題的難點不在于讀取，而在于需要理解workbook中對象的含義。

下面結合具體實例進行分析。

我需要讀取的excel文件如下

console.log(workbook)打印出內容如下

1° SheetNames保存了所有的sheet名字
Sheets保存具體內容
2° 每一個sheet是通過類似A1這樣的鍵值保存每個單元格的內容。稱為單元格對象（Cell Object）
3° 每一個單元格是一個對象（Cell Object），主要有t、v、r、h、w等字段。
詳情官方文檔 https://github.com/SheetJS/js-xlsx#cell-object

• t：表示內容類型，s表示string類型，n表示number類型，b表示boolean類型，d表示date類型，等等
• v：表示原始值；
• f：表示公式，如A2+A3；
• h：HTML內容
• w：格式化后的內容
• r：富文本內容 rich text
  4° !ref確定excel的范圍
  5° !merges確定單元格合并

參考文章：https://www.cnblogs.com/liuxianan/p/js-excel.html

總結

以上是生活随笔為你收集整理的vue js xlsx 读取 本地 excel的全部內容，希望文章能夠幫你解決所遇到的問題。

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