uniapp-微信小程序?qū)С霰砀瘢╔LSX）

這篇文章苦于，后端沒有提供下載接口，前端的小伙伴自己要處理Json數(shù)據(jù)的情況下

用到了，由Sheet.js出品的js-xlsx是一款非常方便的只需要純JS即可讀取和導出excel的工具庫，用于多種電子表格格式的解析器和編寫器。

這里只說明xlsx導出 其他導出，自行測試，sheet.js占用空間大，最好還是讓后端提供接口！

ps:只做了微信小程序測試，其他平臺自測！文章來源地址http://www.zghlxwxcb.cn/news/detail-567300.html

<template>
	<view><button @click="exportClick()">導出</button></view>
</template>

<script>
import * as XLSX from '@/utils/xlsx.core.min.js' //xlsxjs文件路徑
export default {
	data() {
		return {}
	},
	mounted() {
		console.log(XLSX)
	},
	methods: {
		/**
		 * 導出事件
		 */
		exportClick() {
			const header = ['date', 'defaultType', 'device']
			const headerName = { date: '相識日期', defaultType: '類型', device: '姓名' }
			const ExcelData = [{ date: '2022-02-02', defaultType: '御姐', device: '學姐' }, { date: '2022-02-03', defaultType: '蘿莉', device: '學妹' }]
			this.json2Excel(ExcelData, header, headerName, '海王表')
		},
		/**
		 * json轉(zhuǎn)化xlsx
		 * @param {Object} data 數(shù)據(jù)
		 * @param {Object} header header為數(shù)據(jù)源屬性名
		 * @param {Object} headerName 表頭文案
		 * @param {Object} fileName 文件名 ps:這里我寫死了 可自行修改
		 */
		json2Excel(data, header, headerName, fileName) {
			let wopts = {
				bookType: 'xlsx',
				bookSST: false,
				type: 'binary',
			}
			let workBook = {
				SheetNames: ['Sheet1'],
				Sheets: {},
				Props: {},
			}
			const newData = [headerName, ...data]
			// 1.XLSX.utils.json_to_sheet(data)接受一個對象數(shù)組并返回一個基于對象關(guān)鍵字自動生成的“標題”的工作表
			//默認的列順序由使用Object.keys的字段的第一次出現(xiàn)確定
			// 2.將數(shù)據(jù)放入對象workBook的Sheets中等待輸出
			//加了一句skipHeader:true，這樣就會忽略原來的表頭
			workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(newData, { header: header, skipHeader: true })
			// 3.XLSX.write()開始編寫ExceL表格
			// 4.changeData()將數(shù)據(jù)處理成需要的輸出的格式
			console.log(this.changeData(XLSX.write(workBook, wopts)))
			let time = new Date().getTime()
			const StrData = this.changeData(XLSX.write(workBook, wopts))
			const fs = wx.getFileSystemManager() //獲取全局唯一的文件管理器
			fs.writeFile({
				filePath: wx.env.USER_DATA_PATH + `/海王表${time}.xlsx`, // wx.env.USER_DATA_PATH 指定臨時文件存入的路徑，后面字符串自定義
				data: StrData,
				encoding: 'binary', //二進制流文件必須是 binary
				success(res) {
					uni.hideLoading()
					wx.openDocument({
						// 打開文檔
						filePath: wx.env.USER_DATA_PATH + `/海王表${time}.xlsx`, //拿上面存入的文件路徑
						showMenu: true, // 顯示右上角菜單
						success: function(res) {},
						fail: function() {
							uni.showToast({
								title: `打開失敗`,
								icon: 'error',
								duration: 2000,
							})
						},
					})
				},
			})
		},
		/**
		 * 將數(shù)據(jù)處理成需要的輸出的格式
		 * @param {Object} s XLSX輸入
		 */
		changeData(s) {
			//如果存在ArrayBuffer對象(es6)最好采用該對象
			if (typeof ArrayBuffer !== 'undefined') {
				//1.創(chuàng)建一個字節(jié)長度為s.length的內(nèi)存區(qū)域
				let buf = new ArrayBuffer(s.length)
				//2.創(chuàng)建一個指向buf的Unit8視圖，開始于字節(jié)0,直到緩沖區(qū)的末尾
				let view = new Uint8Array(buf)
				//3.返回指定位置的字符的Unicode編碼
				for (let i = 0; i != s.length; ++i) {
					view[i] = s.charCodeAt(i) & 0xff
				}
				return buf
			} else {
				let buf = new Array(s.length)
				for (let i = 0; i != s.length; ++i) {
					buf[i] = s.charCodeAt(i) & 0xff
				}
				return buf
			}
		},
	},
}
</script>

到了這里，關(guān)于uniapp - 微信小程序JSON數(shù)據(jù)導出表格（XLSX）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！