vue3 ts 在线预览base64 word

可以借助第三方库 `FileSaver.js` 和 `js-base64` 来实现将 Base64 编码的 Word 文件在前端进行预览和下载。具体实现步骤如下：

1. 安装依赖

npm install file-saver js-base64 --save

2. 创建一个能够将 Base64 编码的 Word 文件转换成 Blob 类型的方法：

import { Base64 } from 'js-base64';

function base64toBlob(base64: string): Blob {
  const byteString = atob(base64.split(',')[1]);
  const mimeString = base64.split(',')[0].split(':')[1].split(';')[0];
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(arrayBuffer);
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }
  return new Blob([arrayBuffer], { type: mimeString });
}

3. 在 Vue 组件中定义一个变量用于存储 Base64 编码的 Word 文件，以及一个方法用于将其转换成 Blob 类型：

import { defineComponent } from 'vue';
import { saveAs } from 'file-saver';
import { Base64 } from 'js-base64';

export default defineComponent({
  data() {
    return {
      base64: '', // 存储 Base64 编码的 Word 文件
    };
  },
  methods: {
    // 将 Base64 编码的 Word 文件转换成 Blob 类型，并保存到本地
    downloadWord() {
      const blob = base64toBlob(this.base64);
      saveAs(blob, 'file.docx');
    },
  },
});

4. 在模板中添加一个用于预览的 `iframe` 元素和一个下载按钮：

<template>
  <div>
    <iframe :srcdoc="base64" frameborder="0" width="100%" height="500"></iframe>
    <button @click="downloadWord">下载</button>
  </div>
</template>

5. 在获取到 Base64 编码的 Word 文件后，将其赋值给 `base64` 变量即可：

// 获取 Base64 编码的 Word 文件，并赋值给 base64 变量
this.base64 = `data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${Base64.encode(response.data)}`;

这样就可以实现在前端在线预览和下载 Base64 编码的 Word 文件了。