【vue3进阶】vite项目引入文件预览功能

Ares_前端
1,753 阅读5分钟

项目当中经常会遇到文件需要预览的功能，大多数是 pdf、word、excel、img等类型，pdf 类型的文件预览方式很多，也很简单，主要是word和excel类型的文件，大多数支持docx和xlsx类型的，之前doc和xls类型的支持的比较少。下面介绍几种预览的方式，每种方式都有有优缺点，按需求选择。

1. vue-office 插件

vue-office 这个插件使用起来方便，可以网络地址，也可以二进制预览。

支持类型：pdf、docx、xlsx、xls、pptx。

缺点：

  1. xls 类型需要加单独的配置，xlsx 类型不需要单独加配置，2者复杂样式都会有问题。
  2. pptx 类型的预览比较慢。

安装插件

#docx文档预览组件
npm install @vue-office/docx vue-demi@0.14.6

#excel文档预览组件
npm install @vue-office/excel vue-demi@0.14.6

#pdf文档预览组件
npm install @vue-office/pdf vue-demi@0.14.6

#pptx文档预览组件
npm install @vue-office/pptx vue-demi@0.14.6

vue2.6以下的还需要的单独安装一个插件 @vue/composition-api

npm install @vue/composition-api

使用方式一（网络地址）

<template>
    <vue-office-pdf :src="pdfUrl" style="height: 100vh" @rendered="renderedHandler"  @error="errorHandler"/>
    <vue-office-docx :src="docxUrl" style="height: 100vh" />
    <vue-office-excel :src="xlsxUrl" style="height: 100vh" />
    <vue-office-excel :options="options" :src="xlsUrl" style="height: 100vh" />
    <vue-office-pptx :src="pptxUrl" style="height: 100vh" />
</template>

<script setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
//引入VueOfficePptx组件
import VueOfficePptx from '@vue-office/pptx'

let pdfUrl = ref('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf')
let docxUrl = ref('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx')
let xlsxUrl = ref('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx')
let xlsUrl = ref('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xls')
let pptxUrl = ref('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pptx')


// 如果是xls文件一定要加这个配置
let options = {
    xls: true,       //预览xlsx文件设为false；预览xls文件设为true
    minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
    minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
    widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
    heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
    beforeTransformData: (workbookData) => { return workbookData }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
    transformData: (workbookData) => { return workbookData }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
}

const renderedHandler = () => {
  console.log('渲染完成')
}

const errorHandler = () => {
  console.log('渲染失败')
}
</script>

每个组件都可以添加 rendered（渲染完成） 和 error（渲染失败） 事件。

如果是 xls 文件一定要加 options 配置, 将里面的 xls 属性设置为 true。

使用方式二（上传文件）

<template>
    <input type="file" @change="changeHandle"/>
    <vue-office-docx :src="docxUrl" style="height: 100vh" />
</template>
<script setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

let docxUrl = ref('')

const changeHandle = (event) => {
  let file = event.target.files[0]
  let fileReader = new FileReader()
  fileReader.readAsArrayBuffer(file)
  fileReader.onload = () => {
    docxUrl.value = fileReader.result
  }
}
</script>

使用方式三（请求的数据）

<template>
    <vue-office-docx :src="docxUrl" style="height: 100vh" />
</template>
<script setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

let docxUrl = ref('')

onMounted(() => {
  getDocxUrl()
})

const getDocxUrl = () => {
  fetch('请求地址').then(res => {
      //读取文件的arrayBuffer
      res.arrayBuffer().then(res=>{
          docxUrl.value = res
      })
  })
}
</script>

2. iframe + Microsoft Office Viewer服务

这种方式不需要安装插件，支持的文件类型比较多，加载速度快，还原度高。

<template>
    <iframe :src="url" frameborder="0" style="width: 100%;height: 100vh;"></iframe>
</template>
<script setup>
let ctx = 'https://view.officeapps.live.com/op/view.aspx?src='
let url = ref('')

onMounted(() => {
  // 通过 encodeURIComponent 对特殊字符进行编码
  url.value = ctx + encodeURIComponent('文件地址')
})
</script>

支持类型：doc、docx、xlsx、xls、pptx、ppt。

缺点：

  1. 不支持 pdf 格式。（如果是 pdf文件，可以不用加前面的微软链接，直接 iframe 访问）
  2. 不支持文件流的方式预览。
  3. 文件会传输到微软的服务器上，因此可能会涉及到文件隐私。

3. kkFileView

kkFileView 这种方式功能是最为全面的，支持的文件类型也非常多，唯一的缺点就是需要后端部署一个服务，前端调用后端给出的预览接口就可以。

支持的文档类型

  1. 支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx,xlam, xla 等 Office 办公文档
  2. 支持 wps, dps, et, ett, wpt 等国产 WPS Office 办公文档
  3. 支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 办公文档
  4. 支持 vsd, vsdx 等 Visio 流程图文件
  5. 支持 wmf, emf 等 Windows 系统图像文件
  6. 支持 psd 等 Photoshop 软件模型文件
  7. 支持 pdf ,ofd, rtf 等文档
  8. 支持 xmind 软件模型文件
  9. 支持 bpmn 工作流文件
  10. 支持 eml 邮件文件
  11. 支持 epub 图书文档
  12. 支持 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件
  13. 支持 dwg, dxf 等 CAD 模型文件
  14. 支持 txt, xml(渲染), md(渲染), java, php, py, js, css 等所有纯文本
  15. 支持 zip, rar, jar, tar, gzip, 7z 等压缩包
  16. 支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp 等图片预览（翻转，缩放，镜像）
  17. 支持 tif, tiff 图信息模型文件
  18. 支持 tga 图像格式文件
  19. 支持 svg 矢量图像格式文件
  20. 支持 mp3,wav,mp4,flv 等音视频格式文件
  21. 支持 avi,mov,rm,webm,ts,rm,mkv,mpeg,ogg,mpg,rmvb,wmv,3gp,ts,swf 等视频格式转码预览

前端调用方式

//要预览文件的访问地址 
let url = 'http://127.0.0.1:8080/file/test.txt'; 
// http://127.0.0.1:8012/onlinePreview 这个是后端给的预览接口
window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));

其余单个预览某种类型文件的插件就不介绍了，可以搜索出来很多个，后面又更好用的就继续更新。

avatar
文章
阅读
粉丝