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

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

1、安裝npm包xlsx

yarn add xlsx

2、結(jié)合上傳組件和自己寫的讀取方法readXLSX，可以進(jìn)行本地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 // 讀到的數(shù)據(jù)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、其實(shí)問題的難點(diǎn)不在于讀取，而在于需要理解workbook中對象的含義。

下面結(jié)合具體實(shí)例進(jìn)行分析。

我需要讀取的excel文件如下

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。