之前做项目文件预览使用的是WPS的开放api，WPS支持在线预览、编辑、格式转换、OCR 等能力，功能非常强大，pc端，移动端都能适配的，问题就是需要收费，这对我们小公司来说确实是一个不小的成本啊。这不最近做一个管理后台的项目就有一个预览pdf发票的需求，每次一预览浏览器就自动下载了，可真是气人。然后看到网友推荐的Vue Office ，简单尝试了一下，确实很不错。赶紧给小伙伴们分享一下。

介绍

vue office 是一个同时支持vue2、vue3的支持多种文件预览的组件。文件格式支持doc、docx、xls、xlsx、pdf。只需要只要文件地址就可轻松实现文件预览，能够最大限度的还有文件内容。（有些文件打开之后格式会错乱）还有一点就是如果不是vue项目也提供了js支持，这个对前端开发的小伙伴就十分友好了。

Github start已经达到3700，看来还是很受小伙伴们喜欢的！

开始安装

Vue3：

#docx文档预览组件
npm install @vue-office/docx vue-demi

#excel文档预览组件
npm install @vue-office/excel vue-demi

#pdf文档预览组件
npm install @vue-office/pdf vue-demi

Vue2：

npm install @vue/composition-api

代码示例：

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

非Vue项目：

# docx文件预览库
npm i @js-preview/docx
import jsPreviewDocx from "@js-preview/docx";
import '@js-preview/docx/lib/index.css'

//初始化时指明要挂载的父元素Dom节点
const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx'));

# excel文件预览库
npm i @js-preview/excel
import jsPreviewExcel from "@js-preview/excel";
import '@js-preview/excel/lib/index.css';

const myExcelPreviewer = jsPreviewExcel.init(document.getElementById('excel'));

# pdf文件预览库
npm i @js-preview/pdf
import jsPreviewPdf from "@js-preview/pdf";

const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'), {

属性配置

• src 文档地址
• request-options 组件内部通过window.fetch进行请求
• options 一些个性配置，比如宽高等
• staticFileUrl 这个是pdf特有的，毕竟pdf和其他格式文件不一样

官方地址

官网地址：https://501351981.github.io/vue-office/examples/docs/

demo地址：https://501351981.github.io/vue-office/examples/dist/#/docx