当我们在做文件预览功能时，往往会遇到一种糟糕的情况。
就是每预览一种类型的文件，就需要重新安装、配置、编写一个新的库来实现，很麻烦，也很繁琐。
于是，我寻找了一个可以通用的预览库，来处理这个问题。
vue-office，一个支持多种文件docx、excel、pdf预览的vue组件库，作者hit757。这个库不仅能支持vue2/3，也支持非Vue框架的预览使用。
先看一下线上演示效果，如果实现效果与项目使用不符，为节约朋友们时间，可自行选择是否向下阅读。演示地址：https://501351981.github.io/vue-office/examples/dist/#/docx。
如果朋友们觉得能用，就继续往下面看看它的实现。
如果不使用这种vue-office通用的多文件类型预览库，我们可能需要使用如下这些，关于针对特定类型文件的预览库，包括但不限于：
pdf.js：是由 Mozilla 开发的用于在浏览器中渲染PDF文件的JavaScript库。你可以使用它在Vue项目中嵌入PDF预览功能。
Vue-PDF：是一个用于在Vue项目中显示PDF文件的组件。它基于PDF.js构建，提供了简单易用的API。
SheetJS：是一个强大的用于处理Excel文件的JavaScript库。你可以使用它在Vue项目中读取Excel文件并显示内容。
Mammoth.js：是一个用于将.docx文件转换为HTML的JavaScript库。你可以使用它在Vue项目中将Word文档转换为HTML并显示。
el-image组件：预览图片的需求，用它我觉得一般就足够了。
Viewer.js：是一个强大的用于在浏览器中查看图片的JavaScript库。你可以使用它在Vue项目中实现图片预览功能。
Vue Image Viewer：是一个用于在Vue项目中实现图片查看器功能的组件。它支持缩放、旋转等功能。
安装依赖：
#docx文档预览组件npm install @vue-office/docx vue-demi@0.13.11如果是vue2.6版本或以下还需要额外安装 @vue/composition-api。
npm install @vue/composition-api/使用文件的网络地址预览代码：
<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>使用接口返回的二进制文件预览代码：
如果后端给的不是CDN地址，而是一些POST接口，该接口返回二进制流，则可以调用接口获取文件的ArrayBuffer数据，传递给src属性。
<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: '' }}, mounted(){fetch('你的API文件地址', {method: 'post'}).then(res=>{//读取文件的arrayBufferres.arrayBuffer().then(res=>{this.docx = res})})},methods:{rendered(){console.log("渲染完成")}}}</script>安装依赖：
#excel文档预览组件npm install @vue-office/excel vue-demi@0.13.11如果是vue2.6版本或以下还需要额外安装 @vue/composition-api。
npm install @vue/composition-api/使用文件的网络地址预览代码、使用上传文件预览代码、使用接口返回的二进制文件预览代码，基本都和word文件预览使用相同，只不过需要修改逻辑中对样式和组件对象的引用：
//引入VueOfficeExcel组件import VueOfficeExcel from '@vue-office/excel'//引入相关样式import '@vue-office/excel/lib/index.css'安装依赖：
#pdf文档预览组件npm install @vue-office/pdf vue-demi@0.13.11如果是vue2.6版本或以下还需要额外安装 @vue/composition-api。
npm install @vue/composition-api/使用文件的网络地址预览代码、使用上传文件预览代码、使用接口返回的二进制文件预览代码，基本都和word文件预览使用相同，只不过需要修改逻辑中对样式和组件对象的引用：
//引入VueOfficePdf组件import VueOfficePdf from '@vue-office/pdf'为了朋友们阅读到此处时，方便查阅官方文档学习。
最后附上，vue-office官方文档地址：https://github.com/501351981/vue-office。
关于非Vue框架的使用，也请移步参考官方文档。
本文链接：http://www.28at.com/showinfo-26-75310-0.htmlVue2问题：分享一个通用多文件类型预览库
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
下一篇： 面试必备：四种经典限流算法讲解
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号