vue3 ts 预览base64 word文件

可以使用FileReader将word文件转成base64格式，然后在Vue3中通过dataURL的方式预览，以下是示例代码：

<template>
  <div>
    <button @click="previewWord">预览Word文件</button>
    <div v-if="previewData">
      <embed :src="previewData" type="application/vnd.openxmlformats-officedocument.wordprocessingml.document"></embed>
    </div>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      previewData: '',
    };
  },
  methods: {
    previewWord() {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.accept = '.docx';
      fileInput.onchange = (event) => {
        const file = event.target?.files?.[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = () => {
            const base64 = reader.result as string;
            this.previewData = base64;
          };
          reader.readAsDataURL(file);
        }
      };
      fileInput.click();
    },
  },
});
</script>

在上面的示例中，我们通过创建一个input元素，并设置type为file、accept为.docx，然后监听其onchange事件，当用户选择文件后，利用FileReader将文件转为base64格式，并将其赋值给组件的previewData属性，最后在模板中使用`<embed>`标签来预览Word文件。需要注意的是，在`<embed>`标签中，需要设置type为`application/vnd.openxmlformats-officedocument.wordprocessingml.document`，这是Word文件的MIME类型。