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

正在加载今日诗词....

2023-03-27

前言

我们公司目前在做基于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

最简单的就是使用浏览器直接打开 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)}即可
- 缺点：内网无法使用
其他

其他格式文件

这些不支持的文件格式，我们只需要提示不可预览，并提供下载的方式即可。

# 前言

# 图片预览

# 音视频预览

# pdf

# 代码、文本等

# office 在线预览

# 先说几款免费的

# 提供私有化部署

# 再说付费的预览

# 其他格式文件

前言