vue3 ts 实现网页预览 base64 excel 文件

可以通过以下步骤实现：

1. 安装 `xlsx` 库：

npm install xlsx --save

2. 在 Vue3 的 TypeScript 项目中创建一个组件：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <iframe ref="iframe" style="display: none;"></iframe>
  </div>
</template>

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

export default defineComponent({
  methods: {
    async handleFileChange(event: Event) {
      const target = event.target as HTMLInputElement;
      const files = target.files;
      if (files && files.length > 0) {
        const file = files[0];
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = e.target?.result as ArrayBuffer;
          const workbook = XLSX.read(data, { type: 'array' });
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
          const html = XLSX.utils.sheet_to_html(worksheet);
          const iframe = this.$refs.iframe as HTMLIFrameElement;
          iframe.srcdoc = html;
          iframe.style.display = 'block';
        };
        reader.readAsArrayBuffer(file);
      }
    },
  },
});
</script>

3. 在 `handleFileChange` 方法中，读取上传的 Excel 文件，并将其解析为 `XLSX.WorkBook` 对象。然后，将第一个工作表转换为 HTML 字符串，并将其设置为 `iframe` 元素的 `srcdoc` 属性。最后，显示 `iframe` 元素。

4. 使用 `input` 元素上传 Excel 文件，即可在页面上预览 Excel 文件。

注意：由于浏览器的安全限制，不能直接使用 JavaScript 访问本地文件系统，只能通过 `input` 元素上传文件。另外，此方法只适用于生成简单的 HTML 表格，不支持 Excel 文件中的图表、图像等复杂元素。