vue3+Ts实现渲染excel表格数据

先看效果：

UI界面展示

Excel展示：

 

 代码如下：

这里使用的是vue3组件库 Naive ui

<template>
	<div>
		<div class="container">
			<span style="font-size: 18px"><b>评价关系</b></span>
			<span style="font-size: 18px"><b>评估表</b></span>
			<n-button @click="handleUploadClick">上传 Excel 文件</n-button>
			<input type="file" ref="fileInput" @change="handleFileChange" hidden />
		</div>
		<n-data-table :columns="columns" :data="tableData" />
	</div>
</template>

<script setup lang="ts">
	import * as XLSX from 'xlsx'
	import { ref, reactive, toRefs, watch, onMounted, getCurrentInstance } from 'vue'
	import { NButton, NDataTable, NUpload } from 'naive-ui'

	const fileInput = ref(null as HTMLInputElement | null)
	const columns = [
		// key 是表头的字段名
		// title 是表头的文字
		{ title: '工号', key: '工号' },
		{ title: '被评人', key: '被评人' },
		{ title: '上级', key: '上级' },
		{ title: '同级', key: '同级' },
		{ title: '下级', key: '下级' },
		{ title: '客户', key: '客户' },
	]
	const tableData: any = ref([])

	function handleUploadClick() {
		if (fileInput.value) {
			fileInput.value.click()
		}
	}
	function handleFileChange(event: Event) {
		const files = (event.target as HTMLInputElement).files
		if (files && files.length > 0) {
			const file = files[0]
			const reader = new FileReader()
			reader.onload = (e) => {
				const data = (e.target as any).result // 获取上传数据
				const workbook = XLSX.read(data, { type: 'binary' }) // 获取excel
				const firstSheetName = workbook.SheetNames[0] // 获取表名
				const worksheet = workbook.Sheets[firstSheetName] // 获取表格中的数据
				const jsonData = XLSX.utils.sheet_to_json(worksheet) // 将数据转为 json

				tableData.value = jsonData
			}
			reader.readAsBinaryString(file)
		}
		return {
			fileInput,
			columns,
			tableData,
			handleUploadClick,
			handleFileChange,
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 60px;
		line-height: 60px;
		display: flex;
		justify-content: space-around;
	}

	.upload {
		margin-left: 500px;
	}
</style>