支持word(.docx)、excel(.xlsx)、pdf

vue-office

支持多种文件(docx、excel、pdf)预览的vue组件库，支持vue2/3。也支持非Vue框架的预览。

《演示效果》

《非Vue框架预览看这里》

功能特色 一站式：提供docx、pdf、excel多种文档的在线预览方案，有它就够了 简单：只需提供文档的src(网络地址)即可完成文档预览 体验好：选择每个文档的最佳预览方案，保证用户体验和性能都达到最佳状态 安装

#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.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api/ 使用示例

文档预览场景大致可以分为两种：

有文档网络地址，比如 https://***.docx 文件上传时预览，此时可以获取文件的ArrayBuffer或Blob .docx文件预览

使用网络地址预览

<template> <vue-office-docx :src="docx" style="height: 100vh;" @rendered="rendered" /> </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:{ rendered(){ console.log("渲染完成") } } } </script>

上传文件预览

读取文件的ArrayBuffer

<template> <div> <input type="file" @change="changeHandle"/> <vue-office-docx :src="src"/> </div> </template> <script> import VueOfficeDocx from '@vue-office/docx' import '@vue-office/docx/lib/index.css' export default { components: { VueOfficeDocx }, data(){ return { src: '' } }, methods:{ changeHandle(event){ let file = event.target.files[0] let fileReader = new FileReader() fileReader.readAsArrayBuffer(file) fileReader.onload = () => { this.src = fileReader.result } } } } </script> excel文件预览

通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

<template> <vue-office-excel :src="excel" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /> </template> <script> //引入VueOfficeExcel组件 import VueOfficeExcel from '@vue-office/excel' //引入相关样式 import '@vue-office/excel/lib/index.css' export default { components: { VueOfficeExcel }, data() { return { excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址 } }, methods: { renderedHandler() { console.log("渲染完成") }, errorHandler() { console.log("渲染失败") } } } </script> pdf文件预览

通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

<template> <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" /> </template> <script> //引入VueOfficePdf组件 import VueOfficePdf from '@vue-office/pdf' export default { components: { VueOfficePdf }, data() { return { pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址 } }, methods: { renderedHandler() { console.log("渲染完成") }, errorHandler() { console.log("渲染失败") } } } </script> 赞助和微信交流

如果该项目确实帮助到了您，请您不吝赞助，请我喝杯蜜雪冰城交个朋友，微信：_hit757_

打赏记录如下，感谢每一位打赏的朋友

时间	打赏总金额
2023-07	43.84
2023-06	20.01
2023-05	70
2023-04	95
2023-03	66.66
2023-02	30

恳请各位大佬不吝点赞，开源不易，感谢支持~~ 我的其他库

v-focus-next：一个Vue指令，使用该指令后，在表单中回车之后可以自动聚焦下一个表单元素，大大提升表单填写的流畅性。 《v-focus-next》

HowToCode：前端编程之道，探讨如何写出高质量的前端代码，总结前端编程的各种方法论、原则、思维模型等。《前端编程之道》