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

于 2024-08-30 11:52:55 发布
阅读量1.1k 收藏 10
点赞数 17
分类专栏： Vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/st646889325/article/details/141713764
版权

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

简介

如果遇到文档管理类的业务功能，会出现需要在线预览的业务需求，合同文件、发票文件等业务同样需要文件的在线预览。
本文围绕以下解决方案展开：

微软 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 对特殊字符进行编码

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

// 预览地址
const officeUrl = ref('')

// 资源地址
const docx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx'
const xlsx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx'
const pptx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pptx'
const pdf = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf'

// 使用微软 Office Web Viewer 服务预览 office 文件
const previewOffice = (url: string) => {
  // 考虑到特殊字符，通过 encodeURIComponent 处理一下 url
  officeUrl.value = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`
}

// 复制分享地址
const copyToClipboard = async (text: string) => {
  await navigator.clipboard.writeText(text)
  alert('复制成功')
}
</script>

<template>
  <div class="container">
    <div class="btns">
      <!-- 微软 Office Web Viewer 服务 -->
      <button @click="previewOffice(docx)">预览docx</button>
      <button @click="previewOffice(xlsx)">预览xlsx</button>
      <button @click="previewOffice(pptx)">预览pptx</button>
      <!-- pdf 直接预览 -->
      <button @click="officeUrl = pdf">预览pdf</button>
      <!-- 复制分享地址 -->
      <button class="copy-btn" v-if="officeUrl" @click="copyToClipboard(officeUrl)">
        复制分享地址
      </button>
    </div>
    <!-- 通过 iframe 嵌入 -->
    <iframe class="previewOffice" :src="officeUrl"></iframe>
  </div>
</template>

<style lang="scss">
body {
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .previewOffice {
    flex: 1;
  }
  .copy-btn {
    background-color: #070;
    color: #fff;
  }
}
</style>

pdf 预览

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

  • 安装依赖 npm install pdfjs-dist
  • 设置 workerSrc 的值

官方教程

npm install pdfjs-dist

业务场景

渲染 pdf 的需求较为常见，如预览电子发票，合同，学术论文等。

本地选择

<script setup lang="ts">
import { ref } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
// 设置 workerSrc 的值，cdn 远程加载
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`

const canvasRef = ref<HTMLCanvasElement>()
const previewPdf = async (event: Event) => {
  // 获取文件
  const file = (event.target as HTMLInputElement).files?.[0]
  // 获取 canvas
  const canvas = canvasRef.value

  if (file && canvas) {
    const ctx = canvas.getContext('2d')
    if (!ctx) return
    const data = await file.arrayBuffer()
    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 })
      })
    })
  }
}
</script>

<template>
  <!-- pdf 预览 -->
  <input type="file" accept=".pdf" @change="previewPdf" />
  <br />
  <canvas ref="canvasRef"></canvas>
</template>

远程请求

<script setup lang="ts">
import * as pdfjsLib from 'pdfjs-dist'
import { ref } from 'vue'
import axios from 'axios'

// 设置 workerSrc 的值，cdn 远程加载
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`

const canvasRef = ref<HTMLCanvasElement>()

const file = ref()
const getFile = async () => {
  const res = await axios({
    method: 'get',
    url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf',
    responseType: 'arraybuffer',
  })
  file.value = res.data
}

const previewFile = async () => {
  await getFile()
  const canvas = canvasRef.value

  if (file.value && canvas) {
    const ctx = canvas.getContext('2d')
    if (!ctx) return

    const data = new Uint8Array(file.value)
    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 })
      })
    })
  }
}
</script>

<template>
  <button @click="previewFile">获取文档</button>
  <br />
  <!-- pdf 预览容器 -->
  <canvas ref="canvasRef"></canvas>
</template>

docx 预览

通过 docx-preview 加载 docx 文件。

  • 安装依赖
  • 调用 renderAsync 方法来渲染文档

官方文档

npm install docx-preview

本地选择

<script setup lang="ts">
import { ref } from 'vue'
import { defaultOptions, renderAsync } from 'docx-preview'

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

// 定义一个异步函数 previewFile 来预览文档
const previewFile = async (event: Event) => {
  // 获取上传的文件
  const file = (event.target as HTMLInputElement).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,
      experimental: false,
      trimXmlDeclaration: true,
      debug: false,
    })
  }
}
</script>

<template>
  <div>
    <!-- 添加一个文件上传的 input 元素，绑定 change 事件到 previewFile 函数 -->
    <input type="file" accept=".docx" @change="previewFile" />
    <!-- 添加一个 div 元素，通过 ref 绑定到 container 变量 -->
    <div ref="container"></div>
  </div>
</template>

远程请求

<script setup lang="ts">
import { ref } from 'vue'
import { defaultOptions, renderAsync } from 'docx-preview'
import axios from 'axios'

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

const fileRef = ref()
const getFile = async () => {
  const res = await axios({
    method: 'get',
    url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx',
    // 返回类型为 arraybuffer
    responseType: 'arraybuffer',
  })
  fileRef.value = res.data
}

// 定义一个异步函数 previewFile 来预览文档
const previewFile = async () => {
  // 获取文档
  await getFile()
  // 获取 arraybuffer
  const file = fileRef.value

  if (file && container.value) {
    // 调用 renderAsync 方法来渲染文档
    await renderAsync(file, container.value, undefined, {
      ...defaultOptions,
      className: 'docx',
      inWrapper: true,
      ignoreWidth: false,
      ignoreHeight: false,
      ignoreFonts: false,
      breakPages: true,
      ignoreLastRenderedPageBreak: true,
      experimental: false,
      trimXmlDeclaration: true,
      debug: false,
    })
  }
}
</script>

<template>
  <button @click="previewFile">获取文档</button>
  <br />
  <!-- 添加一个 div 元素，通过 ref 绑定到 container 变量 -->
  <div ref="container"></div>
</template>

xlsx 预览

通过 xlsx 加载 xlsx 文件。

  • 安装依赖
  • 调用相关方法获取 excel 文件数据

官方教程

npm install xlsx

本地选择

<script setup lang="ts">
import { ref } from 'vue'
import { read, utils } from 'xlsx'

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

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

    // 读取 Sheets
    const sheet = read(arrayBuffer).Sheets

    /* 渲染数据 */
    rows.value = utils.sheet_to_json(sheet['Data'])
  }
}
</script>

<template>
  <input type="file" accept=".xlsx" ref="fileInput" @change="previewFile" />
  <table>
    <thead>
      <th>Name</th>
      <th>Index</th>
    </thead>
    <tbody>
      <tr v-for="(item, index) in rows" :key="index">
        <td>{{ item.Name }}</td>
        <td>{{ item.Index }}</td>
      </tr>
    </tbody>
  </table>
</template>

远程请求

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { read, utils } from 'xlsx'

const getFile = async () => {
  const res = await axios({
    method: 'get',
    url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx',
    // 返回类型为 arraybuffer
    responseType: 'arraybuffer',
  })
  return res.data
}

const rows = ref<any>([])
const previewFile = async () => {
  const arrayBuffer = await getFile()

  if (arrayBuffer) {
    // 读取 Sheets
    const sheet = read(arrayBuffer).Sheets

    /* 渲染数据 */
    rows.value = utils.sheet_to_json(sheet['Data'])
  }
}
</script>

<template>
  <button @click="previewFile">获取文档</button>
  <br />
  <table>
    <thead>
      <th>Name</th>
      <th>Index</th>
    </thead>
    <tbody>
      <tr v-for="(item, index) in rows" :key="index">
        <td>{{ item.Name }}</td>
        <td>{{ item.Index }}</td>
      </tr>
    </tbody>
  </table>
</template>

vue-office 组件

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

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

官方文档

pdf预览

安装依赖

npm install @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) => {
  src.value = (event.target as HTMLInputElement).files?.[0]
}

// 请求预览
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 install @vue-office/docx

导入并使用


```vue
<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) => {
  src.value = (event.target as HTMLInputElement).files?.[0]
}

// 请求预览
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 install @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) => {
  src.value = (event.target as HTMLInputElement).files?.[0]
}

// 请求预览
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>
st646889325
关注
专栏目录
office文件 vue 预览_前端小功能：Word,PDF,Excel文档vue预览
weixin_39610807的博客
12-19 1332
前端小功能：Word,PDF,Excel文档vue预览js-word文档预览。如果你的文档都是公网可以访问的，可以用微软提供的在线预览This is an embeddedMicrosoft Officedocument, powered byOffice Online如果是本地文件，或者是内网文件则可以使用以下方法：PDF示例：npm install --save vue-pdfPDF.vuei...
文档在线预览解决方案-永中云预览服务
weixin_43317414的博客
08-15 1224
前言 新人博主不知写点啥，目前也只是一个技术小白，比起技术干货，还是分享下近期公司项目中用到的一款有意思的文件在线预览SaaS服务：永中云预览。 需求 支持Office文件、CAD、OFD等多种格式； 文档加密，支持添加水印，不可被复制，不可被下载； 支持多终端、适配移动端； 支持前端简易接入。 方案 针对以上需求，我们也经过了一轮技术选型，最终选择了永中云服务中的永中云预览。永中云服务是当代云计算飞速发展的产物，免去了传统方式的硬件成本投入，仅需轻量级开发，几...
OpenOffice实现前端在线预览office所有文档的lib包
05-13
OpenOffice实现前端在线预览office所有文档+PDF(超详细)的lib包，同步博文讲解：https://blog.csdn.net/ITBigGod 手把手教你实现excel word ppt pdf txt 在线预览功能。2018最新版。
web项目使用OpenOffice实现前端在线预览office、pdf等文档源码
05-13
web项目使用OpenOffice实现前端在线预览office文档源码，同步博文讲解使用，手把手教学：https://blog.csdn.net/ITBigGod
前端在线预览office文件
填了个大空℃
12-20 1035
使用office官方提供的方法 let url = '' window.location.href = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}` 其中url是要打开的文件，要求必须在公网中可以访问的到，然后直接打开链接就可以在线预览 ...
前端如何实现 Word 在线预览_前端预览word文件
2401_84419009的博客
04-27 1991
如果你的需求不是必须要在前端直接预览 Word 文件，你也可以将 Word 文件转换为其他格式，例如 PDF 或图片，然后在前端展示转换后的文件。这样可以使用一些现有的 PDF 预览库或图片展示库来实现预览功能。无论使用哪种方法，都需要注意文件的安全性和隐私保护。确保只有授权用户能够访问和预览文件，并采取适当的安全措施来防止恶意访问和下载。来将 Word 文件转换为 HTML 格式，然后在前端进行展示。在前端实现 Word 文件的在线预览，可以使用第三方库。
前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览
开源世界
03-08 2617
前言 因为业务需要，很多文件需要在前端实现预览，今天就是了解一下吧。 实现方案 找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。 docx文件实现前端预览 代码实现 首先npm i docx-preview 引入renderAsync方法 将blob数据流传入方法中，渲染word文档 import { defaultOptions, renderAsync } from "docx-preview"; renderAsync(buffer, docu
Office文档转换预览解决方案（JAVA）
06-22
在这个“Office文档转换预览解决方案”中，我们将探讨如何使用JAVA进行Office文档的预览，以及如何将这一功能整合到MyEclipse项目中。 首先，我们需要了解的关键知识点是Office文档的格式。Microsoft Office文档...
前端h5预览office相关文件
06-09
在前端H5环境中预览Office相关文件是一项常见的需求，尤其在现代Web应用中，用户可能需要查看、编辑或协作处理各种文档格式，如Word、Excel、PowerPoint等。本篇文章将详细探讨如何实现这一功能，主要关注JavaScript...
word文档前端预览
06-04
本资源，通过前端引入js插件，可以进行本地word文档的预览，并且也通过服务器加载文档进行word文档预览
web项目使用OpenOffice实现前端在线预览office、pdf等文档源码.rar
12-17
web项目使用OpenOffice实现前端在线预览office文档源码，同步博文讲解使用，手把手教学：https://blog.csdn.net/ITBigGod
前端在线预览office文件。
qq_38323658的博客
12-28 1589
前端预览office文件
Vue3借助vue-office插件实现word预览
leah126的博客
04-06 2237
内容概要：包括 内网、操作系统、协议、渗透测试、安服、漏洞、注入、XSS、CSRF、SSRF、文件上传、文件下载、文件包含、XXE、逻辑漏洞、工具、SQLmap、NMAP、BP、MSF…技术文档也是我自己整理的，包括我参加大型网安行动、CTF和挖SRC漏洞的经验和技术要点，电子书也有200多本，由于内容的敏感性，我就不一一展示了。网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。
前端如何实现 Word 在线预览
一步一个脚印，踏实努力，向着目标前进
07-06 1万+
要在前端实现 Word 文件的在线预览，可以使用以下方法：使用第三方库：可以使用一些第三方库来实现 Word 文件的在线预览，例如mammoth.jspdf.js等。这些库可以将 Word 文件转换成 HTML 或 PDF 格式，然后在前端进行展示。你可以根据具体的库文档和示例来实现预览功能。使用 Office Online：Office Online 是微软提供的在线办公套件，可以在网页上直接预览和编辑 Word 文档。
文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览
热门推荐
fhey的博客
05-27 3万+
本文主要介绍了word、excel、pdf、ppt等文件纯前端实现在线预览的方式，从本文的测试情况来看前端实现预览最好的效果还是PDF（或者是图片），不会出现一些文字错乱和乱码的问题，所以一般好的方案就是后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。
前端vue使用onlyoffice控件实现word在线编辑、预览（仅列出前端部分需要做的工作，不包含后端部分）
最新发布
个人博客
06-28 6043
ONLYOFFICE 文档 是一个开源办公套件，包括文本文档、电子表格、演示文稿和可填写表单的编辑器。它提供以下功能：创建、编辑和查看文本文档、电子表格、演示文稿和可填写表单；与其他队友实时协作处理文件。基于这个控件，可以实现前端word、excel、pdf等文件在线编辑、预览，可以说非常强大，目前项目中只使用到word编辑预览，但拓展其他文件也非常简单，完善类型传参，更改onlyoffice配置参数中的文件类型即可。
前端玩转Office，Word、Excel
伶俜Monster
03-26 1344
前端玩转Excel、Word操作，为你的系统增光增彩
viewer.js 预览word
08-19
要使用ViewerJS预览Word文档，您需要将ViewerJS文件夹放置在您的网站上，并告诉浏览器要显示的实际Word文档的位置。可以使用以下链接格式来实现这一点： ``` <a href="/ViewerJS/#../path/to/your_word_document.docx">预览Word文档</a> ``` 在这个链接中，`/ViewerJS/`是ViewerJS文件夹的路径，`../path/to/your_word_document.docx`是您要预览的Word文档的路径。请确保您的Word文档是可访问的，并与ViewerJS文件夹位于同一台服务器上。通过点击这个链接，您将能够在浏览器中预览Word文档。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [WEB中使用viewer.js实现在线浏览Office文档](https://blog.csdn.net/weixin_35852328/article/details/77848318)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值