vue3预览pdf/word/excel/图片

这是在vue2的基础上进行更改的，没有添加随着左侧列表栏改变显示框的大小
存在的问题：展示word和Excel用的是微软的接口，前几天有长达一个多周的调取不了，没有搞明白是接口问题、还是微软对该接口进行管理

先安装 XLSX 插件
npm install xlsx --save

在需要用到的页面进行引入

//在需要显示的页面中引入
<FileView :file="state.file"></FileView>

import {reactive} from "vue";
import FileView from "@/components/FileView/index.vue";
const state = reactive({
  file: {
    fileurl: "",//文件路径
    dialogVisible: false,//是否展示弹窗
    title: "",//文件标题
  },
});

//预览文件--预览点击触发事件--e是当前的文件数据
const fileView = (e) => {
  state.file.fileurl = e.url; //后端请求回来的文件地址url
  state.file.dialogVisible = true; //弹窗
};

<template>
  <div class="analysis-dialog">
    <el-dialog
      :title="`${file.title}文件预览`"
      v-model="file.dialogVisible"
      :before-close="handleClose"
      width="calc(100%)"
      top="0"
    >
      <!-- 图片 -->
      <div v-if="state.type == 'image'" class="picBox">
        <img :src="props.file.fileurl" />
      </div>
      <!-- doc，excel -->
      <div v-else-if="state.type == 'doc'" class="picBox">
        <iframe
          class="child"
          frameborder="0"
          :src="
            'https://view.officeapps.live.com/op/view.aspx?src=' +
            encodeURIComponent(props.file.fileurl)
          "
        ></iframe>
      </div>
      <!-- pdf -->
      <div v-else-if="state.type == 'pdf'" class="picBox">
        <iframe class="child" frameborder="0" :src="props.file.fileurl"></iframe>
      </div>
    </el-dialog>
    <!--  -->
  </div>
</template>
<script setup>
import { ref, onMounted, watch, reactive } from "vue";
import * as XLSX from "xlsx";
import axios from "axios";
const props = defineProps({
  file: Object,
});
const word = ref(null);
const state = reactive({
  type: "",
  sheetData: [],
});
const handleClose = () => {
  props.file.dialogVisible = false;
};
onMounted(() => {});

//监听当前显示的文件路径，判断属于哪一种类型
watch(
  () => props.file.fileurl,
  (nval) => {
    const index = nval.lastIndexOf(".");
    const ext = nval.substring(index + 1);
    if (
      ext === "png" ||
      ext === "jpg" ||
      ext === "jpeg" ||
      ext === "bmp" ||
      ext === "gif" ||
      ext === "webp" ||
      ext === "psd" ||
      ext === "svg" ||
      ext === "tiff"
    ) {
      state.type = "image";
    } else if (ext === "pdf") {
      state.type = "pdf";
    } else {
      state.type = "doc";
      loadExcel(props.file.fileurl);
    }
  }
);
const loadExcel = (file) => {
  axios({
    method: "get",
    responseType: "blob", // 设置响应文件格式
    url: file,
  }).then(({ data }) => {
    word.value = data;
  });
};
</script>

<style lang="scss" scoped>
.child {
  width: 100%;
  height: calc(100vh - 70px);
  border: 0;
}

.dialog-box >>> .el-dialog__headerbtn {
  font-size: 34px;
  left: 200px;
  background-color: aqua;
}

::v-deep .el-dialog {
  left: 200px;
  width: calc(100% - 200px);
  height: calc(100vh - 0px);
  margin: 0;
}
::v-deep .el-dialog__body {
  padding: 0;
  height: calc(100vh - 70px);
  .picBox {
    height: 100%;
    .chile {
      height: 100%;
      height: calc(100vh - 70px);
    }
  }
}
</style>