vue3 一个插件预览多种文件

纯借鉴

纯前端预览文档功能。这个功能比较常见，大多数小白就是下载相对应格式的插件。再进行判断显示就显得很麻烦（我就是那个小白）。

然后发现了这个插件  officeToHtml  这个真的舒服。不过也不是所有的格式都会显示。直接上代码

我这里用的是pnpm下载的 

pnpm add --save file-viewer3

下载好之后封装起来：（注释起来的是我用不到的，用不用看个人需求）；

<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from "vue";

const props = defineProps<{
  url?: string,
  file?: File,
  name?: string,
}>()

// iframe引用
const frame = ref<HTMLIFrameElement>();
// iframe路径指向构建产物，这里是/，因为放在了public下面
// 如果使用cdn，请使用http://viewer.flyfish.group
const source = '/file-viewer3/index.html'
// 查看器的源，当前示例为本源，指定为location.origin即可
const viewerOrigin = location.origin;
// 构建完整url
const src = computed(() => {
  // 文件名称，建议传递ÿ