vue项目实现在线文档预览效果：Office、PDF、Word等格式一网打尽

未闻花名_review

已于 2024-01-26 09:58:24 修改

阅读量4.5k

点赞数 8

文章标签： pdf word 前端

于 2024-01-26 09:54:05 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41786018/article/details/135858517

版权

本文介绍了如何在Vue项目中利用vue-office/docx,vue-office/excel,vue-office/pdf这三个插件实现office、PDF和Excel文档的在线预览，包括安装步骤、模板使用和样式导入等关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中遇到过一个实际需求，需要能够预览office、pdf、word等在线文件，要是让我们自己手写完全没一点思路，不过好在优秀的开源插件@vue-office/docx，@vue-office/excel，@vue-office/pdf直接就帮我们高效的实现了，让在线预览变得如此简单，话不多说我们开始学习如何在项目中使用这些插件帮我们完成需求点。

实现在线文档预览我们需要准备下面这些：

1、首先了解需求需要安装所需要的插件

npm安装

npm install @vue-office/docx @vue-office/excel @vue-office/pdf --save

yarn安装

yarn add @vue-office/docx @vue-office/excel @vue-office/pdf

2、文档插件通过加载文档的URL或文件路径来获取文档内容，并在网页上进行渲染和展示。

<template>
  <div class="wrap">
    <NavBar></NavBar>
    <van-loading v-if="loading" size="24px">加载中...</van-loading>
    <vue-office-docx v-if="fileType === 'docx' || fileType === 'doc'" :src="filePath" style="height: 100vh"
      &#

最低0.47元/天解锁文章