常见附件预览：图片、视频、音频、文本、pdf、office…

前言

我们公司目前在做基于tiptap的在线协同文档，其中有上传附件的功能。在协同操作中，不能让用户看别人上传的附件时，还需要下载到本地，又麻烦体验又差。需要实目前线预览的功能，方便其他阅读者有更好的阅读体验。

像一般的图片、视频、office 等文件，我们都可以实目前线预览功能，但始终不能覆盖全部，万一用户上传什么奇奇怪怪的文件。所以我们需要做好兜底处理，在无法预览时给用于一个提示。列如下面这张图对压缩文件的处理，提示用户主动下载进行查看。

常见附件预览：图片、视频、音频、文本、pdf、office...

下面，我们将常见附件进行分类，然后分别看一下不同的预览方式。

图片预览

图片的预览可以直接使用<img>标签即可

<template>
  <img v-if="file.type ===  img " :style="imgStyle" :src="file.url" alt="常见附件预览：图片、视频、音频、文本、pdf、office...">

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

最简单的就是使用浏览器直接打开 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，否则会打不开
```
<iframe
  style="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,图片,视频,音频等格式预览

再说说付费的预览方式

office365

官网，付费使用
阿里云 IMM
预览效果好，飞书、钉钉文档都是用的它，需要与阿里云 OSS 一起使用，付费使用
XDOC 文档预览
- 官网地址，付费使用
- 预览效果不如 Office Web Viewer，但打开速度更快
- 接入简单，同 Office Web Viewer，只需要把 src 改为https://view.xdocin.com/view?src=${encodeURIComponent(url)}即可
- 缺点：内网无法使用
其他