vue-office实现 Word、Excel 和 PDF预览功能

vue-office系列插件提供了一组与办公文档（如 Word、Excel 和 PDF）相关的功能，使得在 Vue 应用程序中更方便地处理这些文档。

1. @vue-office/docx: 这个插件可以用来创建、编辑和读取 Word 文档（.docx 格式）。开发者可以通过它生成动态的 Word 文件，比如生成报告、发票等。
2. @vue-office/excel: 该插件用于处理 Excel 文件（.xlsx 格式）。可以实现创建、修改和读取 Excel 表格，使得数据的管理和分析变得更加简单。
3. @vue-office/pdf: 这个插件可以用于处理 PDF 文件，包括创建和编辑 PDF 文档，便于生成报告或保存网页内容为 PDF 格式

以Vue3为例 结合 vue-office实现 Word、Excel 和 PDF预览功能 满足日常开发需求。。直接上干货

# 安装
pnpm add @vue-office/docx @vue-office/excel @vue-office/pdf

<template>
  <div class="view-box">
    <div class="item">{{ docx }}</div>
    <vue-office-docx
      style="height: 100vh; overflow: auto"
      :src="docx"
      @rendered="rendered"
    />
  </div>
  <div class="view-box">
    <div class="item">{{ excel }}</div>
    <vue-office-excel
      style="height: 100vh; overflow: auto"
      :src="excel"
      @rendered="rendered"
    />
  </div>
  <div class="view-box">
    <div class="item">{{ pdf }}</div>
    <vue-office-pdf
      style="height: 100vh; overflow: auto"
      :src="pdf"
      @rendered="rendered"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'

// 引入VueOffice组件 目前vue-office不支持doc格式
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'

// 定义文件路径
const pdf = ref('http://static.shanhuxueyuan.com/test.pdf')
const excel = ref('http://static.shanhuxueyuan.com/demo/excel.xlsx')
const docx = ref('http://static.shanhuxueyuan.com/test6.docx')

// 渲染后回调函数
const rendered = () => {
  console.log('rendered')
}
</script>

<style lang="scss" scoped></style>

预览效果展示

至此，即完成了vue-office实现 Word、Excel 和 PDF预览功能 小伙伴们是不是觉得很简单呢~