常见附件预览：图片、视频、音频、代码、pdf、office...
前言
我们公司目前在做基于tiptap的在线协同文档，其中有上传附件的功能。在协同操作中，不能让用户看别人上传的附件时，还需要下载到本地，又麻烦体验又差。是需要实现在线预览的功能，方便其他阅读者有更好的阅读体验。
像一般的图片、视频、office 等文件，我们都可以实现在线预览功能，但始终不能覆盖全部，万一用户上传什么奇奇怪怪的文件。所以我们需要做好兜底处理，再无法预览时给用于一个提示。比如下面这张图对压缩文件的处理，提示用户主动下载进行查看。
下面，我们将常见附件进行分类，然后分别看一下不同的预览方式。
图片预览
图片的预览可以直接使用<img>标签即可
<template> <img v-if="file.type === 'img'" :style="imgStyle" :src="file.url" alt="" /></template>imgStyle用于设置图片的样式，比如一般会为图片添加放大、缩小、旋转功能，只需要设置图片的scale、rotate属性即可。
音视频预览
HTML5 的video和audio标签用于播放视频和音频，所以我们可以封装一个组件专门来处理音视频。
<template> <RenderMedia /></template><script setup lang="tsx">const AUDIO_TYPE = ['mp3', 'ogg', 'mpeg']const VIDEO_TYPE = ['mp4', 'ogg', 'webm']const props = defineProps({ viewType: { type: String, required: true, }, viewFileUrl: String,})
const controls: any = 'controls'const renderAudio = () => ( <audio class="media-content__audio" controls={controls} controlslist="nodownload" > {AUDIO_TYPE.map((type) => ( <source width="100%" src={props.viewFileUrl} type={`audio/${type}`} /> ))} <embed width="100%" src={props.viewFileUrl} /> <embed width="100%" src={props.viewFileUrl} /> </audio>)
const renderVideo = () => ( <video class="media-content__video" controls={controls} controlslist="nodownload" disablePictureInPicture // disablePictureInPicture取消画中画 > {VIDEO_TYPE.map((type) => ( <source width="100%" src={props.viewFileUrl} type={`video/${type}`} /> ))} <object data={props.viewFileUrl} width="100%"> <embed src={props.viewFileUrl} width="100%" /> </object> </video>)
const RenderMedia = () => ( <div class="media-content"> {props.viewType === 'audio' ? renderAudio() : renderVideo()} </div>)</script><style lang="scss" scoped>.media-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}</style>上面我封装的 vue3+ts 的组件，因为我接触 vue3 不久，还不知道里面的 JSX 语法怎么写，刚好学习了 vue3 中的 JSX 语法前端 Vuer，请收下这份《Vue3 中使用 JSX 简明语法》。
需要注意的是：在不支持 video 和 audio 元素的浏览器中，标签中间的内容会显示，作为降级处理。
最简单的就是使用浏览器直接打开 pdf，也就是通过 iframe 的方式加载 pdf 文件，当然也可以使用pdfjs这类比较成熟的 pdf 在线预览方式，我们采用的是 iframe 方式，简单直接。
<template> <iframe v-if="viewType === 'pdf'" :src="viewFileUrl" width="100%" height="100%" class="file-reader file-reader__iframe" /></template>代码、文本等
代码文本等的预览，可以用codemirror来预览，不过一般很少有人附件上传代码，所以我们暂时没做代码的预览，要看直接可以使用代码组件替代。 txt 文本的预览也很简单
-
先通过 url 将文本以
arraybuffer方式请求回来； -
接着通过 Blob 将 arraybuffer 数据转换成 blob，通过 FileReader 去读里面的内容，最后赋值到我们需要展示的内容上；
const blob = new Blob([bufferData], {type: 'text/plain',})const fileReader = new FileReader()fileReader.readAsText(blob, 'utf-8')fileReader.onloadend = (e) => {content.value = fileReader.result || ''} -
将获取到的文本展示在
<pre>标签中。<template><pre class="previewer-content">{{ content }}</pre></template>
office 在线预览
office 的预览可以直接采取网上的一些免费在线预览即可。
先说几款免费的
-
首推微软在线 Office Web Viewer
优点
-
免费，预览效果比较好，官网地址
-
接入简单，文件地址 url 需要通过
encodeURIComponent转一下，url，否则会打不开<iframestyle="width: 100%; min-height: 600px":src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`"width="100%"height="100%"frameborder="1"/> -
支持多种格式
-
Word: .DOCX, .DOCM, .DOTM, .DOTX, .DOC
-
Excel: .XLSX, .XLSB, .XLS, .XLSM
-
PowerPoint: .PPTX, .PPSX, .PPT, .PPS, .PPTM, .POTM, .PPAM, .POTX, .PPSM
缺点
- Word、PPT 文件不能大于 10M，Excel 文件不能大于 5M-
- 加载文件较多，各种图片、文字、样式等，页面臃肿，加载速度慢
- 内网无法使用
-
-
Google Drive 查看器
- 免费，预览效果不如 Office Web Viewer
- 接入简单，同 Office Web Viewer，只需要把 src 改为
https://drive.google.com/viewer?embedded=true&hl=en-US&url=${encodeURIComponent(url)}即可 - 缺点：不能预览 word 文件、excel 和 ppt 都行
提供私有化部署
-
微软 Office Online Server
- 私有化部署，预览效果同 Office Web Viewer
-
kkfileview
- 官网地址
- 支持 office 文档的在线预览，如 doc,docx,xls,xlsx,ppt,pptx,pdf 等，同时支持 txt,zip,rar,图片,视频,音频等格式预览
再说付费的预览
其他格式文件
这些不支持的文件格式，我们只需要提示不可预览，并提供下载的方式即可。