编写一个通用的文件预览组件，并禁止下载（pdf，xlsx，xls，ppt，docx，video，image等）

一_个前端2025-03-28 17:45

在业务开发中我们经常会需要展示我们的一些文档，很多时候我们只需要一些iframe 标签即可完成我们的任务。但如果我们要禁止文件的下载的话就需要我们自己去找组件来进行编译开发 。那么只需要看这篇文章就够了，满足你的一键预览要求。

使用到的技术

  • vue-office
  • vue3.x

预览组件

1. 安装需要用到的插件

cmd 复制代码 
npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf @vue-office/pptx vue-demi

该组件使用vue3写法，低版本需要安装vue-composition插件进行兼容

cmd 复制代码 
# vue2.6及以下使用
npm install @vue/composition-api

2. 编写预览组件

预览组件我已经编写好了，可以直接丢到项目中进行使用。大概逻辑就是

  • 引入vue-office组件并编写到template标签中
  • 组件传参并判断文件类型
  • 判断完成之后调用对应组件进行展示

FilePreview.vue

ts 复制代码 
<script setup>
import { ref, onMounted, computed } from "vue";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePptx from "@vue-office/pptx";

// 定义组件属性
const props = defineProps({
  filePath: {
    type: String,
    required: true,
  },
});

const fileType = ref("");
const fileContent = ref(null);
const loading = ref(true);
const error = ref(false);
const errorMessage = ref("");

// 根据文件路径获取文件类型
const getFileType = (path) => {
  if (!path) return "";
  const extension = path.split(".").pop().toLowerCase();
  return extension;
};

// 判断文件类型
const isImage = computed(() =>
  ["jpg", "jpeg", "png", "gif", "svg", "webp"].includes(fileType.value)
);
const isPdf = computed(() => fileType.value === "pdf");
const isExcel = computed(() => ["xlsx", "xls", "et"].includes(fileType.value));
const isDocx = computed(() => ["docx", "doc", "wps"].includes(fileType.value));
const isVideo = computed(() => ["mp4", "webm", "ogg"].includes(fileType.value));
const isText = computed(() =>
  ["txt", "json", "md", "csv"].includes(fileType.value)
);
const isDps = computed(() => ["dps", "ppt", "pptx"].includes(fileType.value));

// 调试信息
const debugInfo = computed(() => {
  return {
    fileType: fileType.value,
    isExcel: isExcel.value,
    filePath: props.filePath,
  };
});

// 加载文件内容
const loadFile = async () => {
  loading.value = true;
  error.value = false;
  errorMessage.value = "";

  try {
    fileType.value = getFileType(props.filePath);
    console.log("文件类型:", fileType.value, "是否Excel:", isExcel.value);

    if (isText.value) {
      // 加载文本文件
      const response = await fetch(props.filePath);
      if (!response.ok)
        throw new Error(`Failed to load file: ${response.statusText}`);
      fileContent.value = await response.text();
    } else if (fileType.value === "xls") {
      // 特殊处理xls文件
      console.log("检测到xls文件，使用特殊处理");
      // 添加时间戳或随机参数以避免缓存问题
      fileContent.value = `${props.filePath}?t=${new Date().getTime()}`;
    } else {
      // 对于其他类型的文件，直接使用文件路径
      fileContent.value = props.filePath;
    }
  } catch (err) {
    error.value = true;
    errorMessage.value = err.message || "Failed to load file";
    console.error("Error loading file:", err);
  } finally {
    loading.value = false;
  }
};

// 组件挂载时加载文件
onMounted(() => {
  loadFile();
});
</script>

<template>
  <div class="file-preview-container">
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <div v-else-if="error" class="error-container">
      <p>{{ errorMessage || "文件加载失败" }}</p>
    </div>

    <div v-else class="preview-content">
      <!-- PDF 预览 -->
      <vue-office-pdf
        v-if="isPdf"
        :src="fileContent"
        :disable-download="true"
        class="preview-item"
      />

      <!-- Excel 预览 -->
      <vue-office-excel
        v-else-if="isExcel"
        :src="fileContent"
        :disable-download="true"
        :options="{
          xls: fileType === 'xls' ? true : false,
        }"
        class="preview-item"
      />

      <!-- 调试信息 -->
      <!-- <div v-if="isExcel" class="debug-info">
        <p>调试信息: {{ JSON.stringify(debugInfo) }}</p>
      </div> -->

      <!-- Word 预览 -->
      <vue-office-docx
        v-else-if="isDocx"
        :src="fileContent"
        :disable-download="true"
        class="preview-item"
      />

      <!-- PPT/DPS 预览 -->
      <vue-office-pptx
        v-else-if="isDps"
        :src="fileContent"
        :disable-download="true"
        class="preview-item"
      />

      <!-- 图片预览 -->
      <img
        v-else-if="isImage"
        :src="fileContent"
        alt="Image preview"
        class="preview-item image-preview"
        @contextmenu.prevent
        @dragstart.prevent
        draggable="false"
      />

      <!-- 视频预览 -->
      <video
        v-else-if="isVideo"
        controls
        class="preview-item video-preview"
        @contextmenu.prevent
        @dragstart.prevent
        controlsList="nodownload"
      >
        <source :src="fileContent" :type="`video/${fileType}`" />
        您的浏览器不支持视频标签
      </video>

      <!-- 文本预览 -->
      <pre v-else-if="isText" class="preview-item text-preview">{{
        fileContent
      }}</pre>

      <!-- 不支持的文件类型 -->
      <div v-else class="unsupported-file">
        <p>不支持预览此类型的文件 ({{ fileType }})</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.file-preview-container {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-container {
  color: #e74c3c;
  text-align: center;
  padding: 20px;
}

.preview-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-item {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.image-preview {
  object-fit: contain;
  user-select: none;
}

.video-preview {
  max-height: 100%;
  background-color: #000;
}

.text-preview {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #fff;
  padding: 20px;
  white-space: pre-wrap;
  font-family: monospace;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.unsupported-file {
  padding: 20px;
  text-align: center;
  color: #7f8c8d;
}
</style>

使用组件

直接路径传参数即可

ts 复制代码 
<script setup>
import { ref, onMounted } from "vue";
import FilePreview from "./FilePreview.vue";

const filePath = ref("");
const error = ref(false);
const errorMessage = ref("");

// 从URL参数中获取文件路径
const getFilePathFromUrl = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const fileParam = urlParams.get("file");

  if (!fileParam) {
    error.value = true;
    errorMessage.value = "未指定文件路径，请使用 ?file=xxx 参数";
    return "";
  }

  return decodeURIComponent(fileParam);
};

onMounted(() => {
  filePath.value = getFilePathFromUrl();
});
</script>

<template>
  <div class="file-viewer">
    <div v-if="error" class="error-message">
      <h2>{{ errorMessage }}</h2>
      <p>请使用格式: index.html?file=文件路径</p>
    </div>

    <FilePreview v-else-if="filePath" :filePath="filePath" />
  </div>
</template>

<style scoped>
.file-viewer {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.error-message {
  text-align: center;
  padding: 20px;
  color: #e74c3c;
  max-width: 600px;
}
</style>

最后

这只是很粗略的一个模板，大部分类型我都有进行测试。但有遗漏的话还请大家指出我进行完善，但别骂人谢谢大家。

相关推荐
qq. 28040339847 小时前
CSS层叠顺序
前端·css
喝拿铁写前端7 小时前
SmartField AI：让每个字段都找到归属！
前端·算法
猫猫不是喵喵.7 小时前
vue 路由
前端·javascript·vue.js
烛阴7 小时前
JavaScript Import/Export：告别混乱，拥抱模块化！
前端·javascript
bin91538 小时前
DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例12，TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing8 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学8 小时前
解释 Webpack 中的模块打包机制，如何配置 Webpack 进行项目构建？
前端·webpack·node.js
拉不动的猪8 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡8 小时前
浏览器页面渲染机制深度解析：从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
拉不动的猪9 小时前
刷刷题48 (setState常规问答）
前端·react.js·面试
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05苍穹外卖面试总结06DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具07论文笔记：交替单模态适应的多模态表征学习08RAG 实践- Ollama+RagFlow 部署本地知识库09如何本地部署AI智能体平台，带你手搓一个AI Agent10三次握手内部实现原理