目录
[安装 xlsx 依赖](#安装 xlsx 依赖)
前言
关于实现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,
});
// 拿第-个sheet
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const html = XLSX.utils.sheet_to_html(worksheet);
// 返回html
resolve(html);
};
reader.readAsBinaryString(file);
});
};调用实现
javascript
<template>
<n-upload
v-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-upload
v-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-table
id="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>