前端解决方案 - office 系列文件预览

伤心客  金牌会员 | 2024-11-30 21:33:07 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 879|帖子 879|积分 2637

简介

假如遇到文档管理类的业务功能，会出现需要在线预览的业务需求，条约文件、发票文件等业务同样需要文件的在线预览。
本文围绕以下解决方案睁开：
微软 Office Web Viewer
pdfjs
docx-preview
xlsx
第三方封装组件
微软 Office Web Viewer

Office Web Viewer 是由微软提供的一项免费服务，用户不需要安装 Office 软件，直接通过浏览器在线预览 docx、xlsx、pptx 文件。
Office Web Viewer 的服务链接为：
   https://view.officeapps.live.com/op/view.aspx?src=[文件链接]
  其中 [文件链接] 是需要预览文件的在线地址，按需更换成本身的文件链接即可。
预览 docx
预览 xlsx
预览 pptx
注意
1、文件会传输到微软的服务器上，因此大概会涉及到文件隐私。
2、不支持 pdf 预览。
适用场景


  • 用于公网展示的文件预览，如某公告文件在线预览，能快速实现需求。
  • 支持 docx、xlsx、pptx 文件，用于无需下载文件直接在线预览，适用于分享查看。
前端实现

出于通用性考虑，通过 encodeURIComponent 对特殊字符进行编码
  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  4. // 预览地址
  5. const officeUrl = ref('')
  7. // 资源地址
  8. const docx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx'
  9. const xlsx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx'
  10. const pptx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pptx'
  11. const pdf = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf'
  13. // 使用微软 Office Web Viewer 服务预览 office 文件
  14. const previewOffice = (url: string) => {
  15.   // 考虑到特殊字符，通过 encodeURIComponent 处理一下 url
  16.   officeUrl.value = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`
  17. }
  19. // 复制分享地址
  20. const copyToClipboard = async (text: string) => {
  21.   await navigator.clipboard.writeText(text)
  22.   alert('复制成功')
  23. }
  24. </script>
  26. <template>
  27.   <div class="container">
  28.     <div class="btns">
  29.       <!-- 微软 Office Web Viewer 服务 -->
  30.       <button @click="previewOffice(docx)">预览docx</button>
  31.       <button @click="previewOffice(xlsx)">预览xlsx</button>
  32.       <button @click="previewOffice(pptx)">预览pptx</button>
  33.       <!-- pdf 直接预览 -->
  34.       <button @click="officeUrl = pdf">预览pdf</button>
  35.       <!-- 复制分享地址 -->
  36.       <button class="copy-btn" v-if="officeUrl" @click="copyToClipboard(officeUrl)">
  37.         复制分享地址
  38.       </button>
  39.     </div>
  40.     <!-- 通过 iframe 嵌入 -->
  41.     <iframe class="previewOffice" :src="officeUrl"></iframe>
  42.   </div>
  43. </template>
  45. <style lang="scss">
  46. body {
  47.   margin: 0;
  48. }
  49. .container {
  50.   width: 100vw;
  51.   height: 100vh;
  52.   display: flex;
  53.   flex-direction: column;
  54.   .previewOffice {
  55.     flex: 1;
  56.   }
  57.   .copy-btn {
  58.     background-color: #070;
  59.     color: #fff;
  60.   }
  61. }
  62. </style>
复制代码
pdf 预览

通过 PDF.js 加载 PDF 文件，渲染到 Canvas 上。


  • 安装依靠 npm install pdfjs-dist
  • 设置 workerSrc 的值
官方教程
   npm install pdfjs-dist
  业务场景
渲染 pdf 的需求较为常见，如预览电子发票，条约，学术论文等。
本地选择

  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  3. import * as pdfjsLib from 'pdfjs-dist'
  4. // 设置 workerSrc 的值，cdn 远程加载
  5. pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`
  7. const canvasRef = ref<HTMLCanvasElement>()
  8. const previewPdf = async (event: Event) => {
  9.   // 获取文件
  10.   const file = (event.target as HTMLInputElement).files?.[0]
  11.   // 获取 canvas
  12.   const canvas = canvasRef.value
  14.   if (file && canvas) {
  15.     const ctx = canvas.getContext('2d')
  16.     if (!ctx) return
  17.     const data = await file.arrayBuffer()
  18.     pdfjsLib.getDocument({ data }).promise.then((pdf) => {
  19.       pdf.getPage(1).then((page) => {
  20.         const viewport = page.getViewport({ scale: 1.5 })
  21.         canvas.width = viewport.width
  22.         canvas.height = viewport.height
  23.         page.render({ canvasContext: ctx, viewport })
  24.       })
  25.     })
  26.   }
  27. }
  28. </script>
  30. <template>
  31.   <!-- pdf 预览 -->
  32.   <input type="file" accept=".pdf" @change="previewPdf" />
  33.   <br />
  34.   <canvas ref="canvasRef"></canvas>
  35. </template>
复制代码
远程请求

  1. <script setup lang="ts">
  2. import * as pdfjsLib from 'pdfjs-dist'
  3. import { ref } from 'vue'
  4. import axios from 'axios'
  6. // 设置 workerSrc 的值，cdn 远程加载
  7. pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`
  9. const canvasRef = ref<HTMLCanvasElement>()
  11. const file = ref()
  12. const getFile = async () => {
  13.   const res = await axios({
  14.     method: 'get',
  15.     url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf',
  16.     responseType: 'arraybuffer',
  17.   })
  18.   file.value = res.data
  19. }
  21. const previewFile = async () => {
  22.   await getFile()
  23.   const canvas = canvasRef.value
  25.   if (file.value && canvas) {
  26.     const ctx = canvas.getContext('2d')
  27.     if (!ctx) return
  29.     const data = new Uint8Array(file.value)
  30.     pdfjsLib.getDocument({ data }).promise.then((pdf) => {
  31.       pdf.getPage(1).then((page) => {
  32.         const viewport = page.getViewport({ scale: 1.5 })
  33.         canvas.width = viewport.width
  34.         canvas.height = viewport.height
  35.         page.render({ canvasContext: ctx, viewport })
  36.       })
  37.     })
  38.   }
  39. }
  40. </script>
  42. <template>
  43.   <button @click="previewFile">获取文档</button>
  44.   <br />
  45.   <!-- pdf 预览容器 -->
  46.   <canvas ref="canvasRef"></canvas>
  47. </template>
复制代码
docx 预览

通过 docx-preview 加载 docx 文件。


  • 安装依靠
  • 调用 renderAsync 方法来渲染文档
官方文档
   npm install docx-preview
  本地选择

  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  3. import { defaultOptions, renderAsync } from 'docx-preview'
  5. // 定义一个 ref 来存储容器元素
  6. const container = ref<HTMLElement>()
  8. // 定义一个异步函数 previewFile 来预览文档
  9. const previewFile = async (event: Event) => {
  10.   // 获取上传的文件
  11.   const file = (event.target as HTMLInputElement).files?.[0]
  13.   if (file && container.value) {
  14.     // 将文件转换为 ArrayBuffer
  15.     const arrayBuffer = await file.arrayBuffer()
  16.     // 调用 renderAsync 方法来渲染文档
  17.     await renderAsync(arrayBuffer, container.value, undefined, {
  18.       ...defaultOptions,
  19.       className: 'docx',
  20.       inWrapper: true,
  21.       ignoreWidth: false,
  22.       ignoreHeight: false,
  23.       ignoreFonts: false,
  24.       breakPages: true,
  25.       ignoreLastRenderedPageBreak: true,
  26.       experimental: false,
  27.       trimXmlDeclaration: true,
  28.       debug: false,
  29.     })
  30.   }
  31. }
  32. </script>
  34. <template>
  35.   <div>
  36.     <!-- 添加一个文件上传的 input 元素，绑定 change 事件到 previewFile 函数 -->
  37.     <input type="file" accept=".docx" @change="previewFile" />
  38.     <!-- 添加一个 div 元素，通过 ref 绑定到 container 变量 -->
  39.     <div ref="container"></div>
  40.   </div>
  41. </template>
复制代码
远程请求

  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  3. import { defaultOptions, renderAsync } from 'docx-preview'
  4. import axios from 'axios'
  6. // 定义一个 ref 来存储容器元素
  7. const container = ref<HTMLElement>()
  9. const fileRef = ref()
  10. const getFile = async () => {
  11.   const res = await axios({
  12.     method: 'get',
  13.     url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx',
  14.     // 返回类型为 arraybuffer
  15.     responseType: 'arraybuffer',
  16.   })
  17.   fileRef.value = res.data
  18. }
  20. // 定义一个异步函数 previewFile 来预览文档
  21. const previewFile = async () => {
  22.   // 获取文档
  23.   await getFile()
  24.   // 获取 arraybuffer
  25.   const file = fileRef.value
  27.   if (file && container.value) {
  28.     // 调用 renderAsync 方法来渲染文档
  29.     await renderAsync(file, container.value, undefined, {
  30.       ...defaultOptions,
  31.       className: 'docx',
  32.       inWrapper: true,
  33.       ignoreWidth: false,
  34.       ignoreHeight: false,
  35.       ignoreFonts: false,
  36.       breakPages: true,
  37.       ignoreLastRenderedPageBreak: true,
  38.       experimental: false,
  39.       trimXmlDeclaration: true,
  40.       debug: false,
  41.     })
  42.   }
  43. }
  44. </script>
  46. <template>
  47.   <button @click="previewFile">获取文档</button>
  48.   <br />
  49.   <!-- 添加一个 div 元素，通过 ref 绑定到 container 变量 -->
  50.   <div ref="container"></div>
  51. </template>
复制代码
xlsx 预览

通过 xlsx 加载 xlsx 文件。


  • 安装依靠
  • 调用相关方法获取 excel 文件数据
官方教程
   npm install xlsx
  本地选择

  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  3. import { read, utils } from 'xlsx'
  5. // 本地选择文件
  6. const rows = ref<any>([])
  7. const previewFile = async (event: Event) => {
  8.   // 获取上传的文件
  9.   const file = (event.target as HTMLInputElement).files?.[0]
  11.   if (file) {
  12.     // 将文件转换为 ArrayBuffer
  13.     const arrayBuffer = await file.arrayBuffer()
  15.     // 读取 Sheets
  16.     const sheet = read(arrayBuffer).Sheets
  18.     /* 渲染数据 */
  19.     rows.value = utils.sheet_to_json(sheet['Data'])
  20.   }
  21. }
  22. </script>
  24. <template>
  25.   <input type="file" accept=".xlsx" ref="fileInput" @change="previewFile" />
  26.   <table>
  27.     <thead>
  28.       <th>Name</th>
  29.       <th>Index</th>
  30.     </thead>
  31.     <tbody>
  32.       <tr v-for="(item, index) in rows" :key="index">
  33.         <td>{{ item.Name }}</td>
  34.         <td>{{ item.Index }}</td>
  35.       </tr>
  36.     </tbody>
  37.   </table>
  38. </template>
复制代码
远程请求

  1. <script setup lang="ts">
  2. import axios from 'axios'
  3. import { ref } from 'vue'
  4. import { read, utils } from 'xlsx'
  6. const getFile = async () => {
  7.   const res = await axios({
  8.     method: 'get',
  9.     url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx',
  10.     // 返回类型为 arraybuffer
  11.     responseType: 'arraybuffer',
  12.   })
  13.   return res.data
  14. }
  16. const rows = ref<any>([])
  17. const previewFile = async () => {
  18.   const arrayBuffer = await getFile()
  20.   if (arrayBuffer) {
  21.     // 读取 Sheets
  22.     const sheet = read(arrayBuffer).Sheets
  24.     /* 渲染数据 */
  25.     rows.value = utils.sheet_to_json(sheet['Data'])
  26.   }
  27. }
  28. </script>
  30. <template>
  31.   <button @click="previewFile">获取文档</button>
  32.   <br />
  33.   <table>
  34.     <thead>
  35.       <th>Name</th>
  36.       <th>Index</th>
  37.     </thead>
  38.     <tbody>
  39.       <tr v-for="(item, index) in rows" :key="index">
  40.         <td>{{ item.Name }}</td>
  41.         <td>{{ item.Index }}</td>
  42.       </tr>
  43.     </tbody>
  44.   </table>
  45. </template>
复制代码
vue-office 组件

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


  • 同时支持 vue2/3
  • 利用简单
  • 支持本地文件
  • 支持远程地址
官方文档
pdf预览

安装依靠
   npm install @vue-office/pdf
  导入并利用
  1. <script setup lang="ts">
  2. // 引入 VueOffice 组件
  3. import VueOfficePdf from '@vue-office/pdf'
  4. import { ref } from 'vue'
  6. // 设置文档网络地址，可以是本地文件
  7. const src = ref()
  9. // 本地预览
  10. const previewFile = async (event: Event) => {
  11.   src.value = (event.target as HTMLInputElement).files?.[0]
  12. }
  14. // 请求预览
  15. const getFile = () => {
  16.   src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf'
  17. }
  18. </script>
  20. <template>
  21.   <button @click="getFile">获取远程</button>
  22.   <input type="file" accept=".pdf" @change="previewFile" />
  23.   <vue-office-pdf :src="src" style="height: 100vh" />
  24. </template>
复制代码
docx预览

安装依靠
   npm install @vue-office/docx
  导入并利用
  2. ```vue
  3. <script setup lang="ts">
  4. // 引入 VueOffice 组件
  5. import VueOfficeDocx from '@vue-office/docx'
  6. // 引入相关样式
  7. import '@vue-office/docx/lib/index.css'
  8. import { ref } from 'vue'
  10. // 设置文档网络地址，可以是本地文件
  11. const src = ref()
  13. // 本地预览
  14. const previewFile = async (event: Event) => {
  15.   src.value = (event.target as HTMLInputElement).files?.[0]
  16. }
  18. // 请求预览
  19. const getFile = () => {
  20.   src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx'
  21. }
  22. </script>
  24. <template>
  25.   <button @click="getFile">获取远程</button>
  26.   <input type="file" accept=".docx" @change="previewFile" />
  27.   <vue-office-docx :src="src" style="height: 100vh" />
  28. </template>
复制代码
xlsx预览

安装依靠
   npm install @vue-office/excel
  导入并利用
  1. <script setup lang="ts">
  2. // 引入 VueOffice 组件
  3. import VueOfficeExcel from '@vue-office/excel'
  4. // 引入相关样式
  5. import '@vue-office/excel/lib/index.css'
  6. import { ref } from 'vue'
  8. // 设置文档网络地址，可以是本地文件
  9. const src = ref()
  11. // 本地预览
  12. const previewFile = async (event: Event) => {
  13.   src.value = (event.target as HTMLInputElement).files?.[0]
  14. }
  16. // 请求预览
  17. const getFile = () => {
  18.   src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx'
  19. }
  20. </script>
  22. <template>
  23.   <button @click="getFile">获取远程</button>
  24.   <input type="file" accept=".xlsx" @change="previewFile" />
  25.   <vue-office-excel :src="src" style="height: 100vh" />
  26. </template>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

伤心客

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表