準(zhǔn)備工作

JS庫

XLSX.JS
鏈接：https://github.com/SheetJS/sheetjs
下載dist目錄下的xlsx.mini.min.js即可（根據(jù)開發(fā)需求可下載其他版本）

mini版本只支持xlsx不支持xls哦，需要支持xls的話要下載完整版。

Uniapp可以將js文件放在@/common/js/目錄下

本地導(dǎo)入并讀取Excel（*.xls, *.xlsx）

Excel文件示例

選取文件并獲得binary數(shù)據(jù)

H5端(Uniapp)選取文件并獲得binary數(shù)據(jù)

uni.chooseFile({
	count: 1,
	extension: ['.xls', '.xlsx'],
	success: res => {
		let reader = new FileReader();
		reader.onload = e => {
			const data = e.target.result
			process(data) // data為binary數(shù)據(jù)
		};
		reader.readAsBinaryString(res.tempFiles[0]);
	}
})

小程序端選取文件并獲得binary數(shù)據(jù)

wx.chooseMessageFile({
	count: 1,
	type: 'file',
	extension: ['.xls', '.xlsx'],
	success: res => {
		try {
			const path = res.tempFiles[0].path
			const fs = wx.getFileSystemManager()
			const data = fs.readFileSync(path, 'binary') // data為binary數(shù)據(jù)
			process(data)
		} catch (e) {
			console.error(e)
			uni.showModal({
				title: '提示',
				content: "文件讀取失敗",
				showCancel: false
			})
			return
		}
	}
})

Binary數(shù)據(jù)轉(zhuǎn)json

import XLSX from '@/common/js/xlsx.0.19.2.mini.min.js'
function process(data){
	let workbook = XLSX.read(data, {
		type: "binary"
	});
	const sheetName = workbook.SheetNames[0]
	let sheet = workbook.Sheets[sheetName]
	const options = {
		raw: false // 如果不加raw:true的話日期會被讀成數(shù)字，根據(jù)開發(fā)需求決定
	}
	const rawData = XLSX.utils.sheet_to_json(sheet, options);
	// do something
}

此處得到的rawData結(jié)構(gòu)為：

[
	{
		"日期": "2023-01-01",
		"事項(xiàng)": "吃飯",
		"支出": 300.00
	},
	{
		"日期": "2023-01-02",
		"事項(xiàng)": "喝奶茶",
		"支出": 28.00
	},
	{
		"日期": "2023-01-03",
		"事項(xiàng)": "地鐵",
		"支出": 2.00
	}
]

本地構(gòu)建并下載Excel

數(shù)據(jù)準(zhǔn)備

為了對齊數(shù)據(jù)采用二維數(shù)組格式文章來源地址http://www.zghlxwxcb.cn/news/detail-483506.html

const data = [
	[
		'日期',
		'事項(xiàng)',
		'支出'
	], 
	...Object.values(json_data)
]

workbook構(gòu)建

const worksheet = XLSX.utils.aoa_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, '導(dǎo)出');

H5端(Uniapp)導(dǎo)出文件

XLSX.writeFile(workbook, '導(dǎo)出.xlsx');

小程序端導(dǎo)出文件

const fileData = XLSX.write(workbook, {
	bookType: "xlsx",
	type: 'base64'
});
const filePath = `${wx.env.USER_DATA_PATH}/導(dǎo)出.xlsx` // 文件名對應(yīng)表名，多個(gè)表的情況可以自己測試
const fs = wx.getFileSystemManager()
fs.writeFile({
	filePath: filePath,
	data: fileData,
	encoding: 'base64',
	success: res => {
		console.log(res)
		const sysInfo = wx.getSystemInfoSync()
		if (sysInfo.platform.toLowerCase().indexOf('windows') >= 0) {
			wx.saveFileToDisk({
				filePath: filePath,
				success: console.log,
				fail: console.error
			})
		} else {
			wx.openDocument({
				filePath: filePath,
				showMenu: true, // 需要添加showMenu允許用戶導(dǎo)出
				success: console.log,
				fail: console.error
			})
		}
	},
	fail: e => {
		console.error(e)
		if (e.errMsg.indexOf('locked')) {
			wx.showModal({
				title: '提示',
				content: '文檔已打開，請先關(guān)閉',
			})
		}
	}
})

參考

1. SheetJS CE Docs
2. 小程序純前端將數(shù)據(jù)導(dǎo)出為excel表格

到了這里，關(guān)于微信小程序/H5(UniApp)導(dǎo)入/導(dǎo)出excel文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！