微信小程序中如何使用xlsx(xlsx.mini.min.js)實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出功能
更新時間：2026年01月13日 09:15:52 作者：kaka-333
這篇文章主要介紹了微信小程序中如何使用xlsx(xlsx.mini.min.js)實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出功能的相關(guān)資料,包括準(zhǔn)備工作、導(dǎo)出Excel的基本流程、導(dǎo)入Excel的基本流程、常用API說明以及注意事項(xiàng),需要的朋友可以參考下
一、簡介
xlsx.mini.min.js 是 SheetJS 的迷你版本，專門為小程序等輕量級環(huán)境設(shè)計。本文基于微信小程序環(huán)境，詳細(xì)介紹如何使用該庫實(shí)現(xiàn) Excel 文件的導(dǎo)入和導(dǎo)出功能。
二、準(zhǔn)備工作
1. 下載 xlsx.mini.min.js
- 訪問 SheetJS 官方倉庫：https://git.sheetjs.com/sheetjs/sheetjs
- 進(jìn)入
dist目錄，下載xlsx.mini.min.js文件，可以只單獨(dú)下載這個文件就行 - 將文件放置到小程序項(xiàng)目的
libs目錄下
2. 引入庫文件
在需要使用 Excel 功能的頁面或組件中引入：
const xlsx = require("../../libs/xlsx.mini.min")
三、導(dǎo)出 Excel
3.1 基本流程
- 構(gòu)建數(shù)據(jù)數(shù)組：將數(shù)據(jù)組織成二維數(shù)組格式
- 創(chuàng)建工作表：使用
xlsx.utils.aoa_to_sheet()將數(shù)組轉(zhuǎn)換為工作表 - 設(shè)置列寬（可選）：通過
ws['!cols']設(shè)置列寬 - 創(chuàng)建工作簿：使用
xlsx.utils.book_new()創(chuàng)建新工作簿 - 添加工作表：使用
xlsx.utils.book_append_sheet()將工作表添加到工作簿 - 生成文件：使用
xlsx.write()將工作簿轉(zhuǎn)換為 base64 格式 - 保存文件：使用微信小程序的
wx.getFileSystemManager()保存文件
3.2 完整代碼示例
exportToExcel() {
const { list } = this.data
if (!list || list.length === 0) {
wx.showToast({
title: '暫無數(shù)據(jù)可導(dǎo)出',
icon: 'none'
})
return
}
// 1. 構(gòu)建 Excel 數(shù)據(jù)表（二維數(shù)組）
let sheet = []
// 表頭
let titles = ['日期', 'XXXX', 'uuid']
sheet.push(titles)
// 數(shù)據(jù)行
list.forEach((item) => {
let row = [
item['date'] || '',
item['xxxx'] || '0',
item['uuid'] || ''
]
sheet.push(row)
})
try {
// 2. 將數(shù)組轉(zhuǎn)換為工作表
var ws = xlsx.utils.aoa_to_sheet(sheet)
// 3. 設(shè)置列寬（可選）
const colWidths = [
{ wch: 15 }, // 日期列：15個字符寬度
{ wch: 15 }, // 總資產(chǎn)列：15個字符寬度
{ wch: 30 } // uuid列：30個字符寬度
]
ws['!cols'] = colWidths
// 4. 創(chuàng)建工作簿
var wb = xlsx.utils.book_new()
// 5. 將工作表添加到工作簿（第三個參數(shù)是工作表名稱）
xlsx.utils.book_append_sheet(wb, ws, "數(shù)據(jù)記錄")
// 6. 將工作簿轉(zhuǎn)換為 base64 格式
var fileData = xlsx.write(wb, {
bookType: "xlsx",
type: 'base64'
})
// 7. 保存文件
let filePath = `${wx.env.USER_DATA_PATH}/數(shù)據(jù)記錄.xlsx`
const fs = wx.getFileSystemManager()
fs.writeFile({
filePath: filePath,
data: fileData,
encoding: 'base64',
success: (res) => {
const sysInfo = wx.getSystemInfoSync()
// PC 端導(dǎo)出
if (sysInfo.platform.toLowerCase().indexOf('windows') >= 0) {
wx.saveFileToDisk({
filePath: filePath,
success: () => {
wx.showToast({
title: '導(dǎo)出成功',
icon: 'success'
})
},
fail: () => {
wx.showToast({
title: '導(dǎo)出失敗',
icon: 'none'
})
}
})
} else {
// 手機(jī)端導(dǎo)出 - 打開文檔
wx.openDocument({
filePath: filePath,
showMenu: true,
success: () => {
wx.showToast({
title: '導(dǎo)出成功',
icon: 'success'
})
},
fail: () => {
wx.showToast({
title: '導(dǎo)出失敗',
icon: 'none'
})
}
})
}
},
fail: (res) => {
if (res.errMsg && res.errMsg.indexOf('locked') >= 0) {
wx.showModal({
title: '提示',
content: '文檔已打開，請先關(guān)閉',
})
} else {
wx.showToast({
title: '導(dǎo)出失敗',
icon: 'none'
})
}
}
})
} catch (error) {
console.error('導(dǎo)出 Excel 失敗:', error)
wx.showToast({
title: '導(dǎo)出失敗',
icon: 'none'
})
}
}
四、導(dǎo)入 Excel
4.1 基本流程
- 選擇文件：使用
wx.chooseMessageFile()選擇 Excel 文件 - 讀取文件：使用
wx.getFileSystemManager().readFile()讀取文件內(nèi)容（base64 格式） - 解析 Excel：使用
xlsx.read()解析文件 - 轉(zhuǎn)換為 JSON：使用
xlsx.utils.sheet_to_json()將工作表轉(zhuǎn)換為 JSON 數(shù)組 - 處理數(shù)據(jù)：解析 JSON 數(shù)據(jù)并轉(zhuǎn)換為應(yīng)用所需格式
- 保存數(shù)據(jù)：將處理后的數(shù)據(jù)保存到本地存儲
4.2 完整代碼示例
importFromExcel() {
// 1. 選擇文件
wx.chooseMessageFile({
count: 1,
type: 'file',
extension: ['xlsx', 'xls'],
success: (res) => {
const file = res.tempFiles[0]
if (!file) {
wx.showToast({
title: '文件選擇失敗',
icon: 'none'
})
return
}
// 2. 讀取文件
const fs = wx.getFileSystemManager()
fs.readFile({
filePath: file.path,
encoding: 'base64',
success: (readRes) => {
try {
// 3. 解析 Excel
const workbook = xlsx.read(readRes.data, { type: 'base64' })
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
// 4. 轉(zhuǎn)換為 JSON 數(shù)組（header: 1 表示第一行作為表頭）
const jsonData = xlsx.utils.sheet_to_json(worksheet, {
header: 1,
defval: ''
})
if (!jsonData || jsonData.length < 2) {
wx.showToast({
title: 'Excel 文件格式不正確',
icon: 'none'
})
return
}
// 5. 解析表頭
const headers = jsonData[0]
const dateIndex = headers.indexOf('日期')
const moneyIndex = headers.indexOf('總資產(chǎn)(元)')
const uuidIndex = headers.indexOf('uuid')
if (dateIndex === -1 || moneyIndex === -1) {
wx.showToast({
title: 'Excel 文件缺少必要列',
icon: 'none'
})
return
}
// 6. 處理數(shù)據(jù)
const importedData = []
for (let i = 1; i < jsonData.length; i++) {
const row = jsonData[i]
if (!row[dateIndex] && !row[moneyIndex]) {
continue // 跳過空行
}
importedData.push({
date: row[dateIndex] || '',
allmoney: row[moneyIndex] || '0',
uuid: row[uuidIndex] || String((new Date()).getTime() + i)
})
}
if (importedData.length === 0) {
wx.showToast({
title: '沒有有效數(shù)據(jù)可導(dǎo)入',
icon: 'none'
})
return
}
// 7. 保存數(shù)據(jù)
const currentData = wx.getStorageSync("data") ? JSON.parse(wx.getStorageSync("data")) : []
const mergedData = [...currentData, ...importedData]
wx.setStorageSync("data", JSON.stringify(mergedData))
wx.showToast({
title: `成功導(dǎo)入 ${importedData.length} 條記錄`,
icon: 'success'
})
} catch (error) {
console.error('導(dǎo)入 Excel 失敗:', error)
wx.showToast({
title: '導(dǎo)入失敗，請檢查文件格式',
icon: 'none'
})
}
},
fail: (err) => {
console.error('讀取文件失敗:', err)
wx.showToast({
title: '讀取文件失敗',
icon: 'none'
})
}
})
},
fail: (err) => {
if (err.errMsg && err.errMsg.indexOf('cancel') === -1) {
wx.showToast({
title: '選擇文件失敗',
icon: 'none'
})
}
}
})
}
4.3 重復(fù)數(shù)據(jù)檢測示例
在導(dǎo)入時檢測重復(fù)數(shù)據(jù)并提示用戶：
// 檢查是否有重復(fù)數(shù)據(jù)（對比 uuid 字段）
const duplicateUuids = []
importedData.forEach(item => {
const itemUuid = String(item['uuid'] || '')
const existingIndex = currentData.findIndex((existing) =>
String(existing['uuid'] || '') === itemUuid
)
if (existingIndex >= 0) {
duplicateUuids.push(itemUuid)
}
})
// 如果有重復(fù)數(shù)據(jù)，提示用戶
if (duplicateUuids.length > 0) {
wx.showModal({
title: '數(shù)據(jù)重復(fù)',
content: `檢測到 ${duplicateUuids.length} 條重復(fù)數(shù)據(jù)，是否覆蓋？`,
confirmText: '覆蓋',
cancelText: '取消',
success: (modalRes) => {
if (modalRes.confirm) {
// 執(zhí)行導(dǎo)入邏輯
doImport(importedData)
} else {
wx.showToast({
title: '已取消導(dǎo)入',
icon: 'none'
})
}
}
})
} else {
// 沒有重復(fù)，直接導(dǎo)入
doImport(importedData)
}
五、常用 API 說明
5.1 核心方法
| 方法 | 說明 | 示例 |
|---|---|---|
xlsx.utils.aoa_to_sheet(data) | 將二維數(shù)組轉(zhuǎn)換為工作表 | xlsx.utils.aoa_to_sheet([['A', 'B'], [1, 2]]) |
xlsx.utils.book_new() | 創(chuàng)建新工作簿 | var wb = xlsx.utils.book_new() |
xlsx.utils.book_append_sheet(wb, ws, name) | 將工作表添加到工作簿 | xlsx.utils.book_append_sheet(wb, ws, "Sheet1") |
xlsx.write(wb, options) | 將工作簿轉(zhuǎn)換為指定格式 | xlsx.write(wb, {bookType: "xlsx", type: 'base64'}) |
xlsx.read(data, options) | 讀取 Excel 文件 | xlsx.read(base64Data, { type: 'base64' }) |
xlsx.utils.sheet_to_json(ws, options) | 將工作表轉(zhuǎn)換為 JSON | xlsx.utils.sheet_to_json(ws, { header: 1 }) |
5.2 工作表屬性設(shè)置
設(shè)置列寬：
ws['!cols'] = [
{ wch: 15 }, // 第一列寬度：15個字符
{ wch: 20 }, // 第二列寬度：20個字符
{ wch: 30 } // 第三列寬度：30個字符
]
設(shè)置行高（可選）：
ws['!rows'] = [
{ hpt: 20 }, // 第一行高度：20磅
{ hpt: 15 } // 第二行高度：15磅
]
5.3 xlsx.write() 選項(xiàng)
xlsx.write(wb, {
bookType: "xlsx", // 文件類型：xlsx, xls, csv 等
type: 'base64', // 輸出類型：base64, binary, string, buffer
bookSST: true // 是否使用共享字符串表（可選）
})
5.4 sheet_to_json() 選項(xiàng)
xlsx.utils.sheet_to_json(worksheet, {
header: 1, // 1: 數(shù)組格式，'A': 對象格式（使用列名）
defval: '', // 默認(rèn)值（空單元格的值）
raw: false // false: 自動轉(zhuǎn)換數(shù)據(jù)類型，true: 保持原始值
})
六、注意事項(xiàng)
文件大小限制：微信小程序?qū)ξ募笮∮邢拗?，建議單個 Excel 文件不超過 2MB
數(shù)據(jù)類型：導(dǎo)入時注意數(shù)據(jù)類型轉(zhuǎn)換，Excel 中的數(shù)字可能被解析為字符串
空值處理：使用
defval參數(shù)設(shè)置空單元格的默認(rèn)值錯誤處理：務(wù)必添加 try-catch 錯誤處理，避免程序崩潰
平臺差異：PC 端和手機(jī)端的文件保存方式不同，需要分別處理
文件路徑：使用
wx.env.USER_DATA_PATH獲取用戶數(shù)據(jù)目錄列寬單位：
wch表示字符寬度，不是像素工作表名稱：工作表名稱不能包含特殊字符，建議使用中文、英文、數(shù)字
希望本文能幫助你在微信小程序項(xiàng)目中順利實(shí)現(xiàn) Excel 導(dǎo)入導(dǎo)出功能！
參考資源：
- SheetJS 官方文檔：https://docs.sheetjs.com/
- SheetJS GitHub：https://github.com/SheetJS/sheetjs
到此這篇關(guān)于微信小程序中如何使用xlsx(xlsx.mini.min.js)實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出功能的文章就介紹到這了,更多相關(guān)微信小程序中Excel導(dǎo)入導(dǎo)出功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JScript的條件編譯...2007-05-05
本篇文章通過例舉代碼分析的方式給大家講解了JavaScript數(shù)組操作難點(diǎn)以及需要注意的地方，一起學(xué)習(xí)參考下吧。2017-12-12
function.bind()方法默認(rèn)IE8是不支持的，下面有個小技巧可完美解決這個問題，為此疑惑的朋友可以看看2014-10-10
這篇文章主要介紹了解決JS表單驗(yàn)證只有第一個IF起作用的問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12
Bootstrap modal 多彈窗之疊加顯示不出彈窗問題的解決方案
Bootstrap modal 多彈窗之疊加顯示不出彈窗問題，今天小編抽時間給大家分享下解決方案，需要的朋友參考下2017-02-02
原生JavaScript實(shí)現(xiàn)連連看游戲(附源碼)
原生JavaScript版連連看游戲，有源碼，適合初學(xué)者學(xué)習(xí)，喜歡的朋友可以研究下2013-11-11
JavaScript代碼在web應(yīng)用程序中經(jīng)常用到，但是很多開發(fā)者忽視了一些性能方面的知識，如何編寫高性能javascript代碼呢？接下來，小編跟大家一起學(xué)習(xí)2015-10-10
避免 showModalDialog 彈出新窗體的原因分析,一般情況下需要返回值用window.open.2010-05-05
javascript中如何將字符串轉(zhuǎn)換成數(shù)字
這篇文章主要介紹了javascript中如何將字符串轉(zhuǎn)換成數(shù)字問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要給大家介紹了關(guān)于微信小程序中獲取設(shè)備信息的相關(guān)資料,微信小程序是一種在微信平臺上運(yùn)行的應(yīng)用程序,它具有輕量化、便捷性和高兼容性的特點(diǎn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07