在系统内实现office文件的预览前言 我们在日常开发中，尤其是在一些管理系统开发的时候，经常会遇到一些文件预览的功能，

前言

我们在日常开发中，尤其是在一些管理系统开发的时候，经常会遇到一些文件预览的功能，如果是普通的图片，这种还比较好处理，但是像office系列的一些文件，如何实现预览的，虽然我们的一些表格可能有导出的功能，但是如果客户的电脑上没有按照office或者是wps这种应用，下载以后也是不好进行查看，那么我们可以对其增加一个预览功能，下面我们介绍一下如何实现office系列文件的一个在线预览功能

Office Web

Office Web是微软官方提供的服务，它可以做到直接使用浏览器进行在线预览docx,xlsl,pptx文件，使用起来的方法也是很简单的

<script setup>
import { ref } from 'vue'
const docx = 'xxx.docx'
const xlsx = 'xxx.xlsx'
const pptx = 'xxx.pptx'
const pdf = 'xxx.pdf'
const Iframe = ref('')
const open = (e) => {
  Iframe.value = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(e)}`
}
</script>

<template>
  <div>
    <button @click="open(docx)">预览docx</button>
    <button @click="open(xlsx)">预览xlsx</button>
    <button @click="open(pdf)">预览pdf</button>
    <button @click="open(pptx)">预览pptx</button>
    <iframe :src="Iframe" class="Iframe" frameborder="0"></iframe>
  </div>
</template>

<style scoped>
.Iframe {
  width: 100vw;
  height: 100vh;
}
</style>

通过上面方法就可以实现docx,xlsl,pptx等文件的预览功能，主要是通过微软的服务做到的效果预览，但是也存在一些缺点，比如，不支持pdf的预览，并且文件会上传到微软的服务器，可能会涉及到隐私的问题，这个呢主要是适用与一些公网文件的查看，或者是文件分享，例如公告文件这些，可以直接复制链接分享给，收到分享的人也可以直接在线预览查看

pdf

pdf的预览是很常见的，常见的有比如一些论文，通知，合同，发票等，pdf的预览我们可以用到PDF.js - Examples (mozilla.github.io) 这个库，下面我们看一下如何实现pdf的本地预览和在线预览

本地预览

import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs' // 注意导入的写法
// 设置 workerSrc
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.mjs'
const CanvasRef = ref(null)
const InpChang = async (e) => {
  const file = e.target.files[0]
  // console.log(file)
  const canvas = CanvasRef.value
  if (canvas && file) {
    const data = await file.arrayBuffer()
    const ctx = canvas.getContext('2d')
    pdfjsLib.getDocument({ data }).promise.then((pdf) => {
      pdf.getPage(1).then((page) => {
        const viewport = page.getViewport({ scale: 1.5 })
        canvas.width = viewport.width
        canvas.height = viewport.height
        page.render({ canvasContext: ctx, viewport })
      })
    })
  }
}

这里我们使用pdfjsLib.getDocument传入文件的二进制数据然后接收到一个promise调用它的then方法就可以获取到他的文件，然后使用 pdf.getPage(1)用来展示文件的第一页，然后调用page.render渲染到页面上

远程请求

const getFile = async () => {
  const res = await axios({
    method: 'get',
    url: 'https:xxxxx/demo.pdf',
    responseType: 'arraybuffer',
  })
  file.value = res.data
}

pdf是可以直接使用连接打开的，当然也可以通过pdfjs-dist进行预览，和上面是差不多的，只是直接请求过来文件的二进制数据

docx

docx的预览呢和上面其实也大差不差，主要用于docx-preview来进行实现，但是相比上面的哪个，相对来说功能点少一些，但是更简单

import { renderAsync, defaultOptions } from 'docx-preview'

// 定义一个 ref 来存储容器元素
const container = ref()

// 定义一个异步函数 previewFile 来预览文档
const previewFile = async (event) => {
  // 获取上传的文件
  const file = event.target.files?.[0]

  if (file && container.value) {
    // 将文件转换为 ArrayBuffer
    const arrayBuffer = await file.arrayBuffer()
    // 调用 renderAsync 方法来渲染文档
    await renderAsync(arrayBuffer, container.value, undefined, {
      ...defaultOptions,
      className: 'docx', // 用于默认和文档样式类名/前缀的字符串
      inWrapper: true, // 是否在文档内容外部渲染一个包装容器
      ignoreWidth: false, // 禁用页面宽度渲染
      ignoreHeight: false, // 禁用页面高度渲染
      ignoreFonts: false, // 禁用字体渲染
      breakPages: true, // 启用页面断裂，即按页面换行
      ignoreLastRenderedPageBreak: true, // 禁用最后一个 `lastRenderedPageBreak` 元素的页面换行
      experimental: false,
      trimXmlDeclaration: true,
      debug: false, // 启用额外日志记录
    })
  }
}

大致流程呢其实差不多，也是接收到文件，转为二进制的数据，传入给插件，这里的渲染容器就不需要使用到canvas了，他呢主要是把docx 文档渲染/转换为 HTML,且尽可能保持其语义化，但是这样也会让他收到HTML的功能限制，所以再Google Docs 将 docx 文档在画布上呈现为图像

xslx

xslx 他呢就不能直接预览了，他需要讲文件内的内容拿到，然后通过表格的方式再进行渲染展示，具体如下

import { read, utils } from 'xlsx'

// 本地选择文件
const rows = ref([])
const previewFile = async (event) => {
  // 获取上传的文件
  const file = event.target.files[0]

  if (file) {
    // 将文件转换为 ArrayBuffer
    const arrayBuffer = await file.arrayBuffer()

    // 读取 Sheets
    const sheet = read(arrayBuffer).Sheets
    const sheetNames = Object.keys(sheet)
    console.log(sheetNames) // 查看所有工作表名称
    rows.value = utils.sheet_to_json(sheet[sheetNames[0]])
  }
}

我们照常对对文件做二进制的数据处理，然后拿到文件内的数据，对其渲染为表格进行展示查看

vue-office

vue-office内相当于上面几个单独的汇总了，他呢支持多种文件的预览的一个组件库，且同时支持vue2/3

<script setup >
import VueOfficePdf from '@vue-office/pdf'
import { ref } from 'vue'
const src = ref()
const previewFile = async (e) => {
  const file = efiles.[0]
  src.value = file
}
const getFile = () => {
  src.value = 'xxxxx.pdf'
}
</script>

<template>
  <button @click="getFile">获取远程</button>
  <input type="file" accept=".pdf" @change="previewFile" />
  <vue-office-pdf :src="src" style="height: 100vh" />
</template>

vue-office只需要传入文件就可以了，不管是文件地址还是文件都是可以直接进行预览的

结尾

上面就是可以实现我们再系统内直接进行office系列文件预览的功能了，其实还有一个，DocumentServer，类似国内的腾讯文档，金山文档，在线 WPS 文档，可以私有化部署到公司服务器