vue3 ts 在线预览浏览base64 excel

您好，如果您想在Vue3 TypeScript页面中实现在线预览Base64 Excel，可以按照以下步骤操作：

1. 首先，您需要将Base64编码的Excel数据转换为文件对象。您可以使用以下代码将Base64编码的数据转换为Blob对象：

const bstr = atob(base64Data);
let n = bstr.length;
const u8arr = new Uint8Array(n);

while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}

const file = new File([u8arr], fileName, { type: "application/vnd.ms-excel" });

其中，base64Data是您的Base64编码的数据，fileName是您的文件名。

2. 接下来，您可以使用`URL.createObjectURL()`方法将文件对象转换为URL：

const fileUrl = URL.createObjectURL(file);

3. 然后，您可以在Vue3 TypeScript页面中使用`<iframe>`标签来创建一个iframe元素，以便用户可以在页面中预览Excel文件：

<template>
  <div>
    <iframe :src="fileUrl" width="100%" height="600"></iframe>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      fileUrl: ''
    };
  },
  methods: {
    handleClick() {
      const base64Data = 'your base64 data';
      const fileName = 'test.xlsx';
      const bstr = atob(base64Data);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }

      const file = new File([u8arr], fileName, { type: "application/vnd.ms-excel" });
      this.fileUrl = URL.createObjectURL(file);
    }
  }
});
</script>

在上面的代码中，我们使用`data`选项来定义`fileUrl`变量，然后在`handleClick`方法中将Base64编码的Excel数据转换为文件对象，并使用`URL.createObjectURL()`方法将其转换为URL。最后，我们将URL绑定到`<iframe>`标签的`src`属性上，以便用户可以在页面中预览Excel文件。

希望这可以帮助到您！