vue3 純前端解碼base64后預覽word

要在 Vue 3 中实现前端解码 Base64 后预览 Word 文件，你可以使用 `js-base64` 库解码 Base64 字符串，并将其转换为 Blob 对象。然后，你可以使用 `URL.createObjectURL` 方法生成一个 URL，然后将该 URL 分配给 `iframe` 元素的 `src` 属性，以在前端预览 Word 文件。

下面是一个简单的示例代码：

<template>
  <div>
    <input type="file" @change="previewWordFile">
    <iframe v-if="previewUrl" :src="previewUrl" width="100%" height="500"></iframe>
  </div>
</template>

<script>
import { Base64 } from 'js-base64';

export default {
  data() {
    return {
      previewUrl: '',
    };
  },
  methods: {
    previewWordFile(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = () => {
        const base64Str = reader.result.split(',')[1];
        const blob = Base64.toBlob(base64Str, 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
        this.previewUrl = URL.createObjectURL(blob);
      };
      reader.readAsDataURL(file);
    },
  },
};
</script>

在上面的代码中，我们使用 `js-base64` 库将 Base64 字符串解码为 Blob 对象，并将其传递给 `URL.createObjectURL` 方法生成预览 URL。然后，我们将该 URL 分配给 `iframe` 元素的 `src` 属性，以在前端预览 Word 文件。注意，我们还需要指定 `application/vnd.openxmlformats-officedocument.wordprocessingml.document` MIME 类型，以确保浏览器正确解析 Word 文件。