vue3 ts 实现在线预览 base64 excel 文件

可以通过以下步骤实现：

1. 安装 `xlsx` 和 `file-saver` 库：

npm install xlsx file-saver --save

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

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      workbook: null as XLSX.WorkBook | null,
    };
  },
  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' });
          this.workbook = workbook;
        };
        reader.readAsArrayBuffer(file);
      }
    },
    async exportExcel() {
      if (this.workbook) {
        const wbout = XLSX.write(this.workbook, { bookType: 'xlsx', type: 'array' });
        const blob = new Blob([wbout], { type: 'application/octet-stream' });
        saveAs(blob, 'example.xlsx');
      }
    },
  },
});
</script>

3. 在 `handleFileChange` 方法中，读取上传的 Excel 文件，并将其解析为 `XLSX.WorkBook` 对象，保存到组件的 `workbook` 数据中。

4. 在 `exportExcel` 方法中，将 `workbook` 对象导出为 Excel 文件，通过 `saveAs` 方法保存到本地。

5. 使用 `input` 元素上传 Excel 文件，点击按钮导出 Excel 文件。

注意：由于浏览器的安全限制，不能直接使用 JavaScript 访问本地文件系统，只能通过 `input` 元素上传文件。另外，导出 Excel 文件需要使用第三方库 `xlsx` 和 `file-saver`。