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

可以通过以下步骤实现： 1. 安装 `xlsx` 库： ```bash npm install xlsx --save ``` 2. 在 Vue3 的 TypeScript 项目中创建一个组件： ```vue <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 文件中的图表、图像等复杂元素。