前端预览文件，支持.docx.word.pdf.excel.image/png/jpeg/gif/bmp/tiff格式文件,保留原文件样式，封装未为一个组件，单个需求自行代码截取，简单好用，轻松搞得。

效果图：

1.前置条件

必备：引入组件，将下面代码复制到 package.json  文件下得   dependencies  运行 npm i

次要：图片展示-当前element 组件  el-image 版本为  "element-ui": "^2.7.0", 各组件用法大致相同相信各位大佬都明白

次次要：安装 axios ，这个也不必多说了老铁。

    "@vue-office/docx": "^1.6.2",
    "@vue-office/excel": "^1.6.2",
    "@vue-office/pdf": "^1.6.2",

如果出现这个报错，就继续  npm install --save vue-demi 安装一下

父组件调用：

    <filePreviewer :byUuid="RowUuid" ref="filePreviewerRef"></filePreviewer>

1.点击预览获取uuid传递子组件，ref父组件调用子组件，怎么掉都行大家随意

    previewBtn(row){
      this.RowUuid = row.uuid
      setTimeout(()=>{
        this.$refs.filePreviewerRef.previewFile()
      },10)
    },

子组件完整代码 + 傻瓜式注释 === 一看就会 ? 快CV ： 兄弟也救不了你

本代码由于后端返回文件流，所有要转为url，后端要是直接返回url地址得话，直接省略 this.pdfUrl = URL.createObjectURL(blob); // 创建对象 URL 这一步就好了

<template>
  <div>
    <!-- 对话框用于显示文件预览 -->
    <el-dialog title="预览文件" :visible.sync="popShow" @close="clearPreview">
      <!-- 预览 Word 文件 -->
      <vue-office-docx :src="docxUrl" v-if="isWord" />
      <!-- 预览 Excel 文件 -->
      <vue-office-excel style="min-height: 1000px; width: 100%" :src="excelUrl" v-if="isExcel" />
      <!-- 预览 PDF 文件 -->
      <vue-office-pdf style="height: 100%;" :src="pdfUrl" v-if="isPDF" />
      <!-- 预览图像文件 -->
      <el-image 
        alt="双击放大图片" 
        v-if="isImage" 
        style="height: 100%; width: 100%" 
        :initial-view-opener="true" 
        :preview-src-list="[imageUrl]" //设置这个才能放大
        :src="imageUrl" 
      />
      <!-- 对话框底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="popShow = false; clearPreview()">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
// 引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'

// 引入 VueOffice 组件
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeDocx from '@vue-office/docx'
import axios from 'axios'

export default {
  name: 'FilePreviewer',
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf
  },
  props: {
    byUuid: {
      type: String, // 定义 prop 类型为字符串
      required: true // 必填项
    }
  },
  data() {
    return {
      // 文件 URL
      docxUrl: null, // Word 文件 URL
      excelUrl: null, // Excel 文件 URL
      imageUrl: null, // 图像文件 URL
      pdfUrl: null, // PDF 文件 URL
      // 文件类型标志
      isPDF: false, // 是否为 PDF 文件
      isImage: false, // 是否为图像文件
      isWord: false, // 是否为 Word 文件
      isExcel: false, // 是否为 Excel 文件
      // 内容
      wordContent: '', // Word 文件内容
      excelContent: '', // Excel 文件内容
      // 对话框显示状态
      popShow: false, // 对话框是否显示
      // 加载状态
      loading: false // 加载状态
    };
  },
  mounted() {
    // 初始化 PDF 容器引用
    this.$nextTick(() => {
      this.$refs.pdfContainer = document.getElementById('pdfContainer');
    });
  },
  methods: {
    async previewFile() {
      // 检查 UUID 是否存在
      if (!this.byUuid) {
        this.$message.error('文件不存在'); // 提示错误信息
        return; // 退出方法
      }

      // 设置加载状态
      this.loading = true; // 设置加载状态为 true
      this.clearPreview(); // 清除预览

      try {
        // 发送请求获取文件 Blob 数据
        const response = await axios.post('/fileManage/getImage', { uuid: this.byUuid }, {
          responseType: 'blob' // 设置响应类型为 Blob
        });

        const blob = response.data; // 获取 Blob 数据
        const mimeType = response.headers['content-type']; // 获取 MIME 类型

        // 根据 MIME 类型设置文件预览
        switch (mimeType) {
          case 'application/pdf':
            this.isPDF = true; // 设置为 PDF 文件
            this.pdfUrl = URL.createObjectURL(blob); // 创建对象 URL
            break;
          case 'image/png':
          case 'image/jpeg':
          case 'image/gif':
          case 'image/bmp':
          case 'image/tiff':
            this.isImage = true; // 设置为图像文件
            this.imageUrl = URL.createObjectURL(blob); // 创建对象 URL
            break;
          case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
          case 'application/vnd.ms-word.document.macroEnabled.12': // docx 文件类型
          case 'application/msword': // .doc 文件类型
            this.isWord = true; // 设置为 Word 文件
            this.docxUrl = URL.createObjectURL(blob); // 创建对象 URL
            break;
          case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
            this.isExcel = true; // 设置为 Excel 文件
            this.excelUrl = URL.createObjectURL(blob); // 创建对象 URL
            break;
          default:
            console.log('Unsupported file type:', mimeType); // 打印不支持的 MIME 类型
            this.loading = false; // 设置加载状态为 false
            return; // 退出方法
        }
        // 显示对话框
        this.popShow = true; // 显示对话框
        this.loading = false; // 设置加载状态为 false
      } catch (error) {
        console.error('Error fetching file:', error); // 打印错误信息
        this.loading = false; // 设置加载状态为 false
      }
    },
    clearPreview() {
      // 清空文件预览状态
      this.isPDF = false; // 清空 PDF 状态
      this.isImage = false; // 清空图像状态
      this.isWord = false; // 清空 Word 状态
      this.isExcel = false; // 清空 Excel 状态
      this.wordContent = ''; // 清空 Word 内容
      this.excelContent = ''; // 清空 Excel 内容
      this.imageUrl = ''; // 清空图像 URL
      if (this.$refs.pdfContainer) {
        this.$refs.pdfContainer.innerHTML = ''; // 清空 PDF 容器
      }
    }
  }
};
</script>
<style>
#pdfContainer {
  width: 100%; // 设置容器宽度为 100%
  height: 100%; // 设置容器高度为 100%
  border: 1px solid #ccc; // 设置边框
}


.loading {
  display: flex; // 使用 Flex 布局
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
  width: 100%; // 设置宽度为 100%
  height: 100%; // 设置高度为 100%
  font-size: 18px; // 设置字体大小
  color: #333; // 设置字体颜色
}
</style>