vue3上传excel并在线预览

前言

安装 xlsx 依赖

XLSX.utils.sheet_to_html

XLSX.utils.sheet_to_json

前言

关于实现excel文档在线预览的做法，一种方式是通过讲文档里的数据处理成html，一种是将文档处理成图片进行预览，这里使用的是第一种。

安装 xlsx 依赖

npm i xlsx --save

`XLSX.utils.sheet_to_html`

使用XLSX.utils.sheet_to_html方法将工作表(workSheet)转化成html表格的字符串表示，然后显示在前端页面，按照表格的行列结构进行排序，从而实现在线预览的效果

javascript">import * as XLSX from 'xlsx'export const file2Preview = (file: File) => {return new Promise(function (resolve) {const reader = new FileReader();// 文件加载事件reader.onload = function (e) {const data = e.target?.result;const workbook = XLSX.read(data, {type: "binary", cellDates: true,});// 拿第-个sheetconst worksheet = workbook.Sheets[workbook.SheetNames[0]];const html = XLSX.utils.sheet_to_html(worksheet);// 返回htmlresolve(html);};reader.readAsBinaryString(file);});
};

调用实现

javascript"><template><n-uploadv-model:file-list="fileList"action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"@change="handleUploadChange"@remove="handleRemove"@update:file-list="handleFileListChange"><n-button>上传文件</n-button></n-upload><div class="flex-center preview-table" id="previewTable"></div></template>
<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'
import type { UploadFileInfo } from 'naive-ui'
import { NButton } from "naive-ui";
import {file2Preview} from '@main/utils/index';const message = useMessage()const fileListRef = ref<UploadFileInfo[]>([])const fileList = ref(fileListRef)const handleUploadChange = async (data: { fileList: UploadFileInfo[] }) => {const html= await file2Preview(data.fileList[0].file as File);const previewTable = document.getElementById('previewTable');}const handleRemove = (data: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => {if (data.file.id === 'text-message') {message.info('居然没传上去，算了，删了吧')}else if (data.file.id === 'notification') {message.error('不行，这个有用，不许删')return false}else if (data.file.id === 'contact') {message.loading('不知道这个有没有用，等我问问服务器能不能删', {duration: 4000})return new Promise((resolve) => {setTimeout(() => {message.error('不行，他们也不许删这个')resolve(false)}, 4000)})}}const handleFileListChange = () => {message.info('是的，file-list 的值变了')}</script><style lang="less" scoped>::v-deep table {border: 1px solid #000 !important;margin-top: 10px;border-collapse: collapse;}::v-deep th {border: 1px solid #000 !important;}::v-deep tr {border: 1px solid #000 !important;}::v-deep td {border: 1px solid #000 !important;text-align: center;min-width:20px;height: 20px;line-height: 20px;padding: 4px;color:#3e3e3e;
}
</style>

`XLSX.utils.sheet_to_json`

XLSX.utils.sheet_to_json用于将excel表格中的工作表(sheet)转换成JSON格式的函数，使用组件显示

javascript">export const file2Data = (file: File)  => {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = function (e) {const data = e.target?.result;if (!data) {reject(new Error("Failed to read file data"));return;}try {const workbook = XLSX.read(data, { type: "binary" });const result: any[] = [];workbook.SheetNames.forEach((sheetName) => {const sheet = workbook.Sheets[sheetName];const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });if (jsonData.length > 0) {result.push({sheetName,sheet: jsonData});}});console.log(result); // 输出解析后的数据resolve(result);} catch (error) {reject(error);}};reader.onerror = function (e) {reject(new Error("FileReader error: " + e.target?.error?.message));};reader.readAsBinaryString(file);});
};

调用实现

javascript"><script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'
import type { UploadFileInfo } from 'naive-ui'
import { NButton } from "naive-ui";
import {file2Data} from '@main/utils/index';const message = useMessage()
const fileListRef = ref<UploadFileInfo[]>([])const datas = ref({source:[],columns:[]
})const fileList = ref(fileListRef)
const handleUploadChange = async (data: { fileList: UploadFileInfo[] }) => {fileListRef.value = data.fileList;const excelData = await file2Data(data.fileList[0].file as File)datas.value.source = excelData[0].sheet;datas.value.columns = [];Object.keys(datas.value.source[0]).map((v) => {datas.value.columns = [...datas.value.columns,{title: datas.value.source[0][v],key: v}]})datas.value.source = datas.value.source.slice(1);console.log(datas.value);
}const handleRemove = (data: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => {if (data.file.id === 'text-message') {message.info('居然没传上去，算了，删了吧')}else if (data.file.id === 'notification') {message.error('不行，这个有用，不许删')return false}else if (data.file.id === 'contact') {message.loading('不知道这个有没有用，等我问问服务器能不能删', {duration: 4000})return new Promise((resolve) => {setTimeout(() => {message.error('不行，他们也不许删这个')resolve(false)}, 4000)})}
}
const handleFileListChange = () => {message.info('是的，file-list 的值变了')
}</script><template><n-uploadv-model:file-list="fileList"action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"@change="handleUploadChange"@remove="handleRemove"@update:file-list="handleFileListChange"><n-button>上传文件</n-button></n-upload><n-data-tableid="previewTable"class="preview-table":columns="datas.columns":data="datas.source":pagination="false":bordered="false"/></template><style lang="less" scoped>::v-deep table {border: 1px solid #000 !important;margin-top: 10px;border-collapse: collapse;}::v-deep th {border: 1px solid #000 !important;}::v-deep tr {border: 1px solid #000 !important;}::v-deep td {border: 1px solid #000 !important;text-align: center;min-width:20px;height: 20px;line-height: 20px;padding: 4px;color:#3e3e3e;
}
</style>