uniapp - 微信小程序JSON数据导出表格（XLSX）

uniapp-微信小程序导出表格（XLSX）

这篇文章苦于，后端没有提供下载接口，前端的小伙伴自己要处理Json数据的情况下

用到了，由Sheet.js出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，用于多种电子表格格式的解析器和编写器。

这里只说明xlsx导出 其他导出，自行测试，sheet.js占用空间大，最好还是让后端提供接口！

ps:只做了微信小程序测试，其他平台自测！

<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转化xlsx
		 * @param {Object} data 数据
		 * @param {Object} header header为数据源属性名
		 * @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)接受一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表
			//默认的列顺序由使用Object.keys的字段的第一次出现确定
			// 2.将数据放入对象workBook的Sheets中等待输出
			//加了一句skipHeader:true，这样就会忽略原来的表头
			workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(newData, { header: header, skipHeader: true })
			// 3.XLSX.write()开始编写ExceL表格
			// 4.changeData()将数据处理成需要的输出的格式
			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,
							})
						},
					})
				},
			})
		},
		/**
		 * 将数据处理成需要的输出的格式
		 * @param {Object} s XLSX输入
		 */
		changeData(s) {
			//如果存在ArrayBuffer对象(es6)最好采用该对象
			if (typeof ArrayBuffer !== 'undefined') {
				//1.创建一个字节长度为s.length的内存区域
				let buf = new ArrayBuffer(s.length)
				//2.创建一个指向buf的Unit8视图，开始于字节0,直到缓冲区的末尾
				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>