一、仅需实现在线预览，且文件地址公网可访问
（一）微软 office 免费预览（推荐）
支持 doc/docx/xls/xlsx/ppt/pptx 等多种 office 文件格式的免费预览
//示例代码 //在https://view.officeapps.live.com/op/view.aspx?src=后面拼接需要预览的地址，如下：\ let url="http://xxx.com/files/demo.doc"window.open("https://view.officeapps.live.com/op/view.aspx?src="+encodeURIComponent(url))
（二）XDOC 文档预览云服务
移动端和 PC 端无插件预览 PDF、OFD、Word、WPS 等多种格式文档
//示例 let url="http://xxx.com/files/demo.doc" window.open("https://view.xdocin.com/view?src=" + encodeURIComponent(url))
二、本地及非公网文件在线预览
本地或内网预览需要借助插件实现，pdf、mp3、mp4 等主要靠原生标签或浏览器自带功能，尽量减少了插件的安装
（一）pdf、txt
直接使用 ifrem 嵌入页面，用浏览器自带预览功能满足基本需求，其他也可以试试 vue-office 的 pdf 插件
pdf 预览效果
txt 预览效果
（二）mp3、mp4
使用原生 audio 和 video 标签能满足基本需求，如有其他功能的需要可以使用 video.js 等插件
mp3 预览效果
mp4 预览效果
（三）docx、xlsx
vue-office/docx 和 vue-office/excel 对 docx 和 xlsx 文件预览，个人感觉实现上更方便，更多实现方式也可自行查询，案例很多此处就不再列出示例代码
docx 预览效果
xlsx 预览效果
pdf/txt/mp3/mp4/docx/xlsx 及图片示例代码：
<template> <div> <el-button @click="getSrc">点击获取后台文件并预览</el-button> <input type="file" @change="uploadFile($event)" /> <!-- pdf/text --> <iframe v-if="['pdf', 'text'].includes(type)" :src="src"></iframe> <!-- mp3、ogg、wav --> <audio v-if="['mp3', 'ogg', 'wav'].includes(type)" controls :src="src" ></audio> <!-- mp4、webm、ogv --> <video v-if="['mp4', 'webm', 'ogv'].includes(type)" controls :src="src" ></video> <!-- docx --> <vue-office-docx v-if="type == 'docx'" :src="src" @rendered="fileRendered" @error="fileError" /> <!-- xlsx --> <vue-office-excel v-if="type == 'xlsx'" :src="src" @rendered="fileRendered" @error="fileError" /> <!-- 图片 --> <img v-if="['jpg', 'png'].includes(type)" :src="src" /> <!-- doc --> <!-- doc等格式文件的预览需要后台处理成html后使用vue自带v-html进行展示 --> <!-- <div class="docHtml" v-html="html"></div> --> </div></template> <script lang="ts" setup>import { ref } from "vue";import { getImgPath } from "@/api/testApi";import VueOfficeDocx from "@vue-office/docx"; //引入docx预览插件import "@vue-office/docx/lib/index.css"; //docx预览插件样式import VueOfficeExcel from "@vue-office/excel"; //引入excel预览插件import "@vue-office/excel/lib/index.css"; //引入excel预览插件样式 const src = ref("");const type = ref("");// 获取后台文件，根据实际接口处理数据const getSrc = async () => { await getImgPath().then((res: any) => { let imgBlob = new Blob([res]); src.value = URL.createObjectURL(imgBlob); });};// 本地上传的文件const uploadFile = (ev: any) => { let file = ev.target.files[0]; if (file.name) { src.value = URL.createObjectURL(file); }};// vueOffice渲染完成的回调const fileRendered = (e: any) => { console.log("渲染完成了", e);}; // vueOffice渲染出错的回调const fileError = (e: any) => { console.log("渲染出错了", e);};</script> <style lang="scss" scoped></style>
（三）pptx
pptx 预览使用的是 pptx.js 文件
1.在 pptx.js 官网下载压缩包
PPTXjshttps://pptx.js.org/index.html
（1）进入官网点击下载按钮
（2）选择版本下载
2.在 public 文件夹中添加 pptxjs 依赖文件
3.在 index.html 中引入
<link rel="stylesheet" href="/PPTXjs/css/pptxjs.css" /> <link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css" /> <!-- for charts graphs --> <script type="text/javascript" src="/PPTXjs/js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="/PPTXjs/js/jszip.min.js"></script> <!-- v2.. , NOT v.3.. --> <script type="text/javascript" src="/PPTXjs/js/filereader.js"></script> <!--https://github.com/meshesha/filereader.js --> <script type="text/javascript" src="/PPTXjs/js/d3.min.js"></script> <!-- for charts graphs --> <script type="text/javascript" src="/PPTXjs/js/nv.d3.min.js"></script> <!-- for charts graphs --> <script type="text/javascript" src="/PPTXjs/js/pptxjs.js"></script> <script type="text/javascript" src="/PPTXjs/js/divs2slides.js"></script> <!-- for slide show -->
4.在页面中使用
<template> <div id="pptx"></div></template> <script lang="ts" setup>const pptxShow = (src: any) => { nextTick(() => { $("#pptx").pptxToHtml({ pptxFileUrl: src, //pptx文件地址 slidesScale: "100%", }); });</script> <style lang="scss" scoped></style>
pptx 预览效果
pptx 预览时注意：页面报 Uncaught (in promise) TypeError: $(...).pptxToHtml is not a function 的错误，检查在 index.html 中引入的 jequry 版本是否与项目中其他地方使用的版本冲突导致，选择保留一个版本即可。
最后
欢迎关注"所谓前端"微信公众号,大家一起交流 点击扫码关注
如果以上内容对你有帮助，就点个赞加入收藏吧~~
