vue-office 组件

支持多种文件(docx、excel、pdf)预览的 vue 组件库。

同时支持 vue2/3
使用简单
支持本地文件
支持远程地址

pdf 预览

安装依赖 npm i @vue-office/pdf

<script setup lang="ts">
// 引入 VueOffice 组件
import VueOfficePdf from '@vue-office/pdf'
import { ref } from 'vue'

// 设置文档网络地址，可以是本地文件
const src = ref()

// 本地预览
const previewFile = async (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  src.value = file
}

// 请求预览
const getFile = () => {
  src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf'
}
</script>

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

docx 预览

安装依赖 npm i @vue-office/docx
<script setup lang="ts">
// 引入 VueOffice 组件
import VueOfficeDocx from '@vue-office/docx'
// 引入相关样式
import '@vue-office/docx/lib/index.css'
import { ref } from 'vue'

// 设置文档网络地址，可以是本地文件
const src = ref()

// 本地预览
const previewFile = async (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  src.value = file
}

// 请求预览
const getFile = () => {
  src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx'
}
</script>

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

xlsx 预览

安装依赖 npm i @vue-office/excel

<script setup lang="ts">
// 引入 VueOffice 组件
import VueOfficeExcel from '@vue-office/excel'
// 引入相关样式
import '@vue-office/excel/lib/index.css'
import { ref } from 'vue'

// 设置文档网络地址，可以是本地文件
const src = ref()

// 本地预览
const previewFile = async (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  src.value = file
}

// 请求预览
const getFile = () => {
  src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx'
}
</script>

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

私有化 office 部署(运维部署) ONLYOFFICE Docs是一个免费的协作在线办公套件，包括文本、电子表格和演示文稿的查看器和编辑器，还有表单和PDF，完全兼容Office Open XML格式：.docx、.xlsx、.pptx，并支持实时协作编辑。

类似国内的腾讯文档，金山文档，在线 WPS 文档，而 ONLYOFFICE 可私有化部署到公司服务器，文件隐私相对更高，部署工作由公司运维负责