使用vue-office插件在线预览docx、.xlsx、pdf文件

仰望星空 666

已于 2025-04-27 16:02:22 修改

阅读量2.9k

点赞数 15

CC 4.0 BY-SA版权

文章标签： vue.js pdf javascript

于 2025-04-22 16:01:17 首次发布

本文链接：https://blog.youkuaiyun.com/smallqiang/article/details/147423170

一）vue-office简介

vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，支持vue2和vue3。

查看演示demo

二）功能特色

一站式：提供docx、.xlsx、pdf多种文档的在线预览方案，有它就够了，不用再四处寻找、测试、集成各种库了
使用简单：只需提供文档的src(网络地址)即可完成文档预览，也支持ArrayBuffer、Blob等多种格式
支持样式：不仅能预览内容，也支持文档样式，最大限度还原office文件内容

三）安装

1. 安装 Node.js

vue-office插件属于Vue.js，Vue.js 依赖于 Node.js 和 npm（Node Package Manager），因此首先需要安装 Node.js。

下载 Node.js:
- 访问 Node.js 官网。
- 下载并安装适合你操作系统的 Node.js 版本（建议选择 LTS 版本）。
验证安装:
- 打开终端（Windows 上是命令提示符或 PowerShell，macOS/Linux 上是终端）。
- 输入以下命令来验证 Node.js 和 npm 是否安装成功：
  bash
```
node -v
npm -v
```
- 如果显示了版本号，说明安装成功。

2. 安装 Vue CLI

Vue CLI 是 Vue.js 官方提供的命令行工具，用于快速搭建 Vue 项目。

全局安装 Vue CLI:
- 在终端中运行以下命令：
  bash
```
npm install -g @vue/cli
```
- 安装完成后，可以通过以下命令验证 Vue CLI 是否安装成功：
  bash
```
vue --version
```

3. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目。

创建项目:
- 在终端中运行以下命令来创建一个新的 Vue 项目：
  bash
```
vue create my-vue-project
```
- my-vue-project 是项目的名称，你可以根据需要更改。

4.安装vue-office组件

cd my-vue-project

npm install @vue-office/docx vue-demi

npm install @vue-office/excel vue-demi

npm install @vue-office/pdf vue-demi

5. docx文件预览，修改 `App.vue` 文件（在项目src目录下）

<template>
    <vue-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

注意：1）文档网络地址是互联网地址，内网地址没有测试通过，但可以是相对地址，相对地址文件在public目录下，如下面test6.docx文件

<template>
    <vue-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            docx: 'test6.docx' //设置相对地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>

注意：2）只支持docx文件预览，不支持doc文件。

注意：3）xlsx文件预览和pdf文件预览请参考 https://501351981.github.io/vue-office/examples/docs/guide/preview-pdf.html

6. 运行开发服务器

进入项目目录并启动开发服务器：

cd my-vue-project
npm run serve

在浏览器中访问 http://localhost:8080，你应该能够看到 Office 文档的预览。

7.如何指定Vue 项目的目录位置

在创建 Vue 项目时，默认情况下，Vue CLI 会在当前目录下生成项目文件夹。如果你想指定项目的目录位置，可以通过以下方式实现：

方法：先进入目标目录，再创建项目

你可以先通过终端进入目标目录，然后再运行 vue create 命令。

示例：

cd /path/to/your/project-directory
vue create .

cd /path/to/your/project-directory 进入目标目录。
vue create . 在当前目录下创建项目。

注意事项：

如果当前目录不为空，Vue CLI 会提示你选择一个空目录或覆盖现有内容。

node.js 下载：https://nodejs.org/en/download/

vuejs官网：https://v2.cn.vuejs.org/

开源下载：https://github.com/501351981/vue-office

插件指南：https://501351981.github.io/vue-office/examples/docs/guide/

在线效果预览：https://501351981.github.io/vue-office/examples/dist/#/docx