vue3 ts 通过xlsx实现网页预览 base64 excel 文件 并显示原excel样式

您好！对于您的问题，我可以提供以下思路：

使用 xlsx 库解析 base64 编码的 excel 文件，将其转换为 JSON 数据；
使用 vue3 的 template 或 JSX 语法，结合样式库，渲染出表格的 HTML 结构；
针对 excel 文件中的样式，使用 CSS 样式或 JavaScript 动态添加样式，实现表格的样式效果。

具体实现细节，可以参考以下代码示例：
<template>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th v-for="(col, index) in columns" :key="index">{{ col }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" :key="index">
<td v-for="(cell, index) in row" :key="index">{{ cell }}</td>
</tr>
</tbody>
</table>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import * as XLSX from 'xlsx';

export default defineComponent({
props: {
fileData: {
type: String,
required: true,
},
},
data() {
return {
columns: [], // 表格列名
rows: [], // 表格数据
};
},
mounted() {
// 解析 base64 编码的 excel 文件
const file = XLSX.read(this.fileData, { type: 'base64' });
const sheet = file.Sheets[file.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(sheet, { header: 1 });

// 提取表格列名和数据
this.columns = data[0];
this.rows = data.slice(1);
},
});
</script>

<style scoped>
.table-container {
overflow-x: auto;
}
.table {
border-collapse: collapse;
width: 100%;
}
.table th,
.table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.table th {
background-color: #f2f2f2;
}
</style>

这个组件可以接收一个 base64 编码的 excel 文件，解析出其中的表格数据和样式，并渲染出一个带有原样式的表格。您只需要将该组件引入到您的项目中，并传递正确的参数，即可实现您想要的预览效果。
希望我的回答能对您有所帮助！如果您还有其他问题，欢迎继续提问。