青岛网站推广外包地推扫码平台
支持多种文件( docx、excel、pdf)预览的vue组件库，支持vue2/3。也支持非Vue框架的预览。
github: 《仓库地址》
演 示： 《演示效果》
功能特色
- 一站式：提供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>//引入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("渲染完成")}}
}上传文件预览
读取文件的ArrayBuffer
<template><div><input type="file" @change="changeHandle"/><vue-office-docx :src="src"/></div>
</template>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}}}
}excel文件预览和pdf文件预览通过文件ArrayBuffer预览和上面docx的使用方式一致。