最近项目使用到前端预览各种格式文件的功能，这里将vue项目预览各种格式的过程做个总结：

1. 图片以及音视频文件

图片和音视频的预览非常简单，可以直接使用html提供的相关标签（img，video，audio）渲染即可，此处不过多赘述。

2.pdf文件

网上查看了很多中pdf预览的方案，由于项目中要求不高只需简单的预览即可，所以最终选择了使用iframe标签来实现，只需给src属性绑定文件地址即可。

<iframe :src="iframeSrc" width="100%" height="100%" />

3.doc文件，xls文件

word文档和excel文件最终选择@vue-office插件来预览，这个插件也支持pdf的预览，可在官网查看更多功能配置，使用方式如下：

安装docx组件
npm install @vue-office/docx vue-demi

安装excel组件
npm install @vue-office/excel vue-demi

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

此处使用网络地址的方式，同时此插件还支持ArrayBuffer的方式，主要代码如下：

<vue-office-docx :src="docSrc" />
<vue-office-excel :src="xlsSrc" />

import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import '@vue-office/docx/lib/index.css'

components: {
  VueOfficeDocx,
  VueOfficeExcel
}

data() {
  return {
    docSrc: '', // doc文件地址
    xlsSrc: '' // xls文件地址
  }
}

在项目逻辑处只需将网络地址赋值给对应变量即可。

4.ppt文件

ppt文件最终选择PPTXJs插件来预览，可在官网查看更多功能配置，使用方式如下：

需在官网下周对应压缩包，里面会有相关css和js文件，然后在html中引入相关文件，在逻辑处通过pptxToHtml方法渲染即可，主要代码如下：

<link rel="stylesheet" href="./PPTXJs/pptxjs.css">
<script type="text/javascript" src="./PPTXJs/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./PPTXJs/jszip.min.js"></script>
<script type="text/javascript" src="./PPTXJs/filereader.js"></script>
<script type="text/javascript" src="./PPTXJs/pptxjs.js"></script>

<div id="ppt" />
  
$('#ppt').pptxToHtml({ pptxFileUrl: 'ppt文件地址' })

5.txt文件

txt文件也可通过iframe标签预览，但有时会有乱码出现，所以此处通过请求将txt文件转成blob形式重新转义渲染到页面上，实现过程主要代码如下：

<div ref="txt" />
  
axios({ method: 'get', responseType: 'blob', url: 'txt文件地址' }).then((res) => {
  res.data.text().then(res => this.$refs.txt.innerText = res)
})

注意：以上预览方式只是针对单纯的预览选择的便捷方式，如有更复杂的功能需自行研究。