#在uniapp上解析excel表格(基於微信的雲開發)

時間 2021-08-12

標籤 node 數據庫 npm 小程序後端微信小程序數組服務器微信 app 欄目 Microsoft Office 简体版

原文原文鏈接

目的：因爲項目的框架是uniapp，因此在開發小程序的狀況下，採用了小程序的雲函數來解析excel表格（擼碼不易，請筆芯點個贊）。node

雲開發的好處：數據庫

開發者可使用雲開發開發微信小程序、小遊戲，無需搭建服務器，便可使用雲端能力。雲開發爲開發者提供完整的原生雲端支持和微信服務支持，弱化後端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業務開發，便可實現快速上線和迭代。關於雲開發的更多瞭解，能夠去其官方文檔查閱。

採用雲開發解析excel的步驟：npm

一、先開通雲開發平臺。
二、在雲項目建立雲函數。
三、編寫雲函數。
四、客戶端中使用wx.chooseMessageFile選擇表格，經過wx.cloud.uploadFile上傳excel，在雲函數裏解析excel，並把數據添加到雲數據庫。

1、開通雲平臺

一、填寫小程序appid，選擇創建雲開發模板，點擊建立按鈕。小程序

二、建立成功後會進入這樣一個界面，而後咱們就能夠點擊雲開發按鈕,進入開通階段，暫時能夠選擇免費版本的。後端

2、在雲項目建立雲函數

一、在cloudfunctions的目錄下右鍵點擊選擇新建Node.js雲函數，新建一個雲函數微信小程序

二、這樣咱們就建立好了一個excel雲函數了。數組

三、在excel的目錄下右鍵點擊選擇外部終端窗口，輸入npm install node-xlsx 安裝依賴。安裝完成後，看到node-xlsx的版本號就算安裝成功了。服務器

3、在雲項目編寫雲函數

首先咱們先配置miniprogram目錄下的app.js的環境變量,代碼以下：微信

//app.jsApp({  onLaunch: function () {if (!wx.cloud) {      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
    } else {
      wx.cloud.init({// env 參數說明：//   env 參數決定接下來小程序發起的雲開發調用（wx.cloud.xxx）會默認請求到哪一個雲環境的資源//   此處請填入環境 ID, 環境 ID 可打開雲控制檯查看//   如不填則使用默認環境（第一個建立的環境）env: 'xxxxxxxxxxxxxx',  //該環境變量可從雲平臺中找到traceUser: true,
      })
    }this.globalData = {}
  }
})複製代碼

配置完成後編寫雲函數的步驟以下：app

一、編寫excel的index.js。貼上代碼以下：

//index.jsconst cloud = require('wx-server-sdk')
cloud.init({env: "xxxxxxxxxxxxxxx"}) //該env環境變量可從雲平臺中找到var xlsx = require('node-xlsx'); //引用node-xlsx依賴const db = cloud.database()  //實例化db庫exports.main = async (event, context) => {	let {fileID} = event	//1,經過fileID下載雲存儲裏的excel文件const res = await cloud.downloadFile({fileID: fileID})	const buffer = res.fileContent	const all_excel_data = [] //用來存儲全部的excel數據//2,解析excel文件裏的數據var sheets = xlsx.parse(buffer); //獲取到全部sheets，由於表格可能會有多張表
	sheets.forEach(function(sheet) {//這裏粗暴的用了else if 來處理對應的表名的內容，並處理相應的字段//（這裏大家能夠按照大家的表格內容，本身作相應的處理）if (sheet['name'] == "LoRa網關") {			for (var rowId in sheet['data']) {				var row = sheet['data'][rowId]; 
				if (rowId > 1 && row.length) { 
					all_excel_data.push({						addr: row[0], 
						type: row[1], 
						id: row[2], 
						name: row[3],						sheetName:"LoRa網關"
					})
				}
			}
		}else if (sheet['name'] == "LoRa終端") {			for (var rowId in sheet['data']) {				var row = sheet['data'][rowId]; 
				if (rowId > 1 && row.length) { 
					all_excel_data.push({						type: 0, 
						addr: row[0],						id: row[1], 
						sheetName:"LoRa終端"
					})
				}
			}
		}else if (sheet['name'] == "監測設備") {			for (var rowId in sheet['data']) {				var row = sheet['data'][rowId]; 
				if (rowId > 1 && row.length) { 
					all_excel_data.push({						type: 1, 
						addr: row[0],						id: row[1], 
						sheetName:"監測設備"
					})
				}
			}
		}else if (sheet['name'] == "無線路由") {			for (var rowId in sheet['data']) {				var row = sheet['data'][rowId]; 
				if (rowId > 1 && row.length) { 
					all_excel_data.push({						targetDeviceId: row[0], 
						addr1: row[1],						addr2: row[2],						addr3: row[3],						addr4: row[4],						addr5: row[5],						addr6: row[6],						addr7: row[7],						addr8: row[8],						sheetName:"無線路由"
					})
				}
			}
		}else if (sheet['name'] == "測點") {			for (var rowId in sheet['data']) {				var row = sheet['data'][rowId]; 
				if (rowId > 1 && row.length) { 
					all_excel_data.push({						name: row[0], 
						id: row[1],						dataType: row[2],						readWriteType: row[3],						addr: row[4],						regAddr: row[5],						uploadInterval: row[6],						collectByteCount: row[7],						gain: row[8],						offset: row[9],						uploadDataType: row[10],						sheetName:"測點"
					})
				}
			}
		}else if (sheet['name'] == "條件上報") {			for (var rowId in sheet['data']) {				var row = sheet['data'][rowId]; 
				if (rowId > 1 && row.length) { 
					all_excel_data.push({						id: row[0], 
						condition: row[1],						num1: row[2],						num2: row[3],						sheetName:"條件上報"
					})
				}
			}
		}
	});// 一塊兒添加全部數據var result = await db.collection('users').add({   //這裏的 users 字段必定要和雲平臺的數據哭的集合名稱保持一致data: all_excel_data
	}).then(res => {		return res
	}).catch(err => {		return err
	})	return result
}複製代碼

二、編寫好excel的index.js雲函數後，發現其中有個問題，就是每次拿到excel的內容丟到數據庫時，若是不清空之前的數據庫，數據庫數據就會不斷的增長或者被覆蓋，因此咱們又新建了一個雲函數deleData，建立方法跟建立excel函數同樣，但云函數deleData的index.js代碼以下：

const cloud = require('wx-server-sdk')
cloud.init({env: "xxxxxxxxxxxxxxx"}) //該env環境變量可從雲平臺中找到const db = cloud.database()exports.main = async(event, context) => {  let {type,_id} = event  try {if (type == 'all') {      const _ = db.command      return await db.collection('users').where({_id: _.exists(true) //只要_id字段存在，就刪除  }).remove()
    } else {      return await db.collection('users').where({_id: _id
      }).remove()
    }
  } catch (e) {console.error(e)
  }
}複製代碼

三、編寫好全部的雲函數後，能夠右鍵點擊恰好已經搞好的兩個雲函數deleData和excel選擇上傳並部署，部署成功後，之後若是要來修改對應的index.js的業務邏輯的時候，把修改好的index.js增量上傳就好。

4、在uniapp的操做

一、先初始化雲開發的環境

wx.cloud.init({env: 'xxxxxxxxxxxxx'});var db = wx.cloud.database();複製代碼

一、使用wx.chooseMessageFile來選擇微信對話列表中的文件，wx.chooseMessageFile上傳文件，wx.cloud.callFunction調用咱們前面所建立的雲函數excel併成功返回解析後的數據,完整代碼以下：

export default {	data() {		return {			fileName: '', //文件名
		};
	},	onLoad() {
		wx.cloud.init({			env: 'xxxxxxxxxxxxxxx'
		});
		db = wx.cloud.database();
	},	methods: {		//選擇excel表格chooseFile() {
			wx.chooseMessageFile({				count: 1,				type: 'file',				success: res => {					if (res.tempFiles[0].name.indexOf('.xlsx') == -1) {						this.showToast('選擇的文件不是excel文件，請從新選擇!');						return;
					}					this.fileName = res.tempFiles[0].name;					let path = res.tempFiles[0].path;					this.uploadExcel(path);
				},				fail: err => {					console.log(err);
				}
			});
		},		// 上傳excel表格到雲存儲uploadExcel(path) {
			wx.cloud.uploadFile({				cloudPath: new Date().getTime() + '.xls',				filePath: path,				success: async res => {					console.log('上傳成功', res.fileID);					//先獲取數據庫全部的數據長度let getData = await db
						.collection('users')
						.where({})
						.count();					//每隔20條去刪除數據，直到清空數據庫for (let i = 0; i < getData.total; i += 20) {						this.getListIndexSkip(i).then(async res => {							//清空數據庫await wx.cloud.callFunction({								name: 'deledata',								data: {									type: 'all',									_id: res._id
								},								success: res => {									console.log(res);
								},								fail: err => {									console.log('刪除失敗', err);
								}
							});
						});
					};					setTimeout(() => {						this.parseF(res.fileID);
					}, 50)

				},				fail: err => {					this.showToast('解析excel失敗!');					console.log('上傳失敗', err);
				}
			});
		},		//解析文件parseF(fileID) {
			wx.cloud.callFunction({				name: 'excel',				data: {					fileID: fileID
				},				success: async res => {					console.log('解析並上傳成功', res);					let getData = await db
						.collection('users')
						.where({})
						.count();					console.log("長度：" + getData.total);					let list = [];					for (let i = 0; i < getData.total; i += 20) {						this.getListIndexSkip(i).then(res => {
							list = list.concat(res);							if (list.length == getData.total) {								console.log(list);								//list爲解析返回來的數組this.showToast('解析excel成功!');
							}
						});
					}
				},				fail: err => {					console.log('解析失敗', err);					this.showToast('解析excel失敗!');
				}
			});
		},		//單次查詢函數getListIndexSkip(skip) {			return new Promise((resolve, reject) => {				let statusList = [];				let selectPromise;				if (skip > 0) {
					selectPromise = db
						.collection('users')
						.where({})
						.skip(skip)
						.get();
				} else {
					selectPromise = db
						.collection('users')
						.where({})
						.get();
				}
				selectPromise
					.then(res => {
						resolve(res.data);
					})
					.catch(e => {						console.error(e);
						reject('查詢失敗!');
					});
			});
		},		//彈框顯示showToast(val) {
			uni.showToast({				title: val,				icon: 'none'
			});
		},
	}
};複製代碼

二、以上的例子返回的結果跟雲平臺的數據庫徹底一致，效果截圖以下：

返回來的數據，這裏是以數組的形式來展現