vue3 ts 通过vue-office/exce实现在线预览 base64 excel 文件
时间: 2024-03-21 12:37:37 浏览: 17
可以通过以下步骤实现:
1. 安装 `vue-office/excel` 库:
```bash
npm install vue-office/excel --save
```
2. 在 Vue3 的 TypeScript 项目中创建一个组件:
```vue
<template>
<div>
<input type="file" ref="fileInput" @change="handleFileChange">
<vue-excel :data="excelData" v-if="excelData"></vue-excel>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import VueExcel from 'vue-office/excel';
export default defineComponent({
components: {
VueExcel,
},
setup() {
const excelData = ref(null);
async function 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 string;
excelData.value = data;
};
reader.readAsDataURL(file);
}
}
return {
excelData,
handleFileChange,
};
},
});
</script>
```
3. 在 `handleFileChange` 方法中,读取上传的 Excel 文件,并将其转换为 Base64 编码的字符串,保存到组件的 `excelData` 数据中。
4. 在模板中,使用 `vue-excel` 组件来显示 Excel 文件。当 `excelData` 数据存在时,显示 `vue-excel` 组件。
注意:由于 `vue-office/excel` 库使用的是 Microsoft Office Online 的服务,需要在生产环境中配置 SSL/TLS 证书,否则会出现安全问题。此外,`vue-excel` 组件的使用需要在 Microsoft Office Online 的网站上注册并获取 `client-id` 和 `client-secret`。