JavaScript結(jié)合xlsx.js實現(xiàn)excel數(shù)據(jù)導出導入功能

更新時間：2026年02月28日 09:36:04 作者：Cxiaomu

在做后端開發(fā)管理實際業(yè)務開發(fā)中,有時會遇到處理導入、導出Excel文件的數(shù)據(jù),本文主要為大家詳細介紹了JS如何使用xlsx.js實現(xiàn)這一功能,下面小編就和大家簡單介紹一下吧

簡介

在做后端開發(fā)管理實際業(yè)務開發(fā)中，有時會遇到處理導入、導出Excel文件的數(shù)據(jù)，比如多語言管理和報表數(shù)據(jù)。

將前端數(shù)據(jù)中對象數(shù)組格式的數(shù)據(jù)與excel格式數(shù)據(jù)進行相互轉(zhuǎn)換。

既然時對 Excel 文件進行處理，自然需要插件了，比如 xlsx 。

于是，進行簡單demo的實現(xiàn)與演示。

實現(xiàn)

安裝

安裝 xlsx

npm install xlsx --save
# or
yarn add xlsx

導出Excel文件數(shù)據(jù)

導出需要先獲取到指定數(shù)據(jù)，然后對數(shù)據(jù)進行處理成合適的數(shù)據(jù)（即常規(guī)的列表數(shù)據(jù)），最后才是轉(zhuǎn)換成 Excel 。

如本身是列表數(shù)據(jù)，可以對數(shù)據(jù)結(jié)構(gòu)不進行處理，僅取需要導出的數(shù)據(jù)。

import XLSX from 'xlsx';

/** 將列表數(shù)據(jù)過濾出需要導出的屬性 */
// objArr - 列表數(shù)據(jù)，labels - 需要導出的屬性
const toBeExcelData = (objArr, labels) => {
  const resArr = []
  objArr.forEach((itemData) => {
    const theObj = {}
    const keys = Object.keys(itemData)
    keys.forEach((theKey) => {
      if (labels.includes(theKey)) theObj[theKey] = itemData[theKey]
    })
    resArr.push(theObj)
  })
  return resArr
}

/** 將數(shù)據(jù)轉(zhuǎn)成 Excel 文件并導出 */
const exportToExcel = (data) => {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 表名
  XLSX.writeFile(workbook, "exported-data.xlsx"); // 文件名，可加上文件路徑
}

導入Excel文件數(shù)據(jù)

這里，就開始實現(xiàn) Excel 文件數(shù)據(jù)導入了。

導入這里就比較簡單了，利用插件的函數(shù)進行獲取數(shù)據(jù)和格式轉(zhuǎn)換就可以了。

import XLSX from 'xlsx'

/** 獲取excel數(shù)據(jù)并解析 */
const getExcelData = (url) => {
  const workBook = XLSX.readFile(url) // 目標文件獲取
  let name = workBook.SheetNames[0] // 讀取表格中第一個表
  let sheet = workBook.Sheets[name] // 數(shù)據(jù)獲取
  return XLSX.utils.sheet_to_json(sheet) // 數(shù)據(jù)格式轉(zhuǎn)換
}

應用

導出

示例代碼

// 列表數(shù)據(jù)
const demoData = [
  { name: '122', age: '24e', state: true, date: '20231227', address: 'asdfgfgg' },
  { name: '2233', age: '23', state: false, date: '20231225', address: 'zxcv' },
  { name: '3344', age: '22', state: true, date: '20231226', address: 'vbnmz' },
  { name: '678', age: '21', state: false, date: '20231224', address: '23svvcx' },
  { name: '3322', age: '24', state: true, date: '20231221', address: 'wdvggtr' },
  { name: '2266', age: '42', state: false, date: '20231223', address: 'igbxsxx' }
]

// 需導出的字段
const demoLabels = ['name', 'state', 'date','address']

const testDemo = () => {
  const data = toBeExcelData(demoData, demoLabels); // 數(shù)據(jù)過濾
  exportToExcel(data); // 導出
}
testDemo(); // 執(zhí)行

效果

導入

示例代碼

這里就用剛剛導出的excel文件進行導入并輸出。

let resData = getExcelData('./exported-test.xlsx') // excel數(shù)據(jù)
console.log('input data: ', resData);

效果

到此這篇關(guān)于JavaScript結(jié)合xlsx.js實現(xiàn)excel數(shù)據(jù)導出導入功能的文章就介紹到這了,更多相關(guān)JavaScript excel數(shù)據(jù)導出導入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: