哪家公司的网站做得好,东营 微信网站建设,用wordpress做视频,北京企业建网站优帮云支持多种文件( docx、excel、pdf)预览的vue组件库#xff0c;支持vue2/3。也支持非Vue框架的预览。 github: 《仓库地址》
演 示#xff1a; 《演示效果》
功能特色
一站式#xff1a;提供docx、pdf、excel多种文档的在线预览方案#xff0c;有它就够了简单#xff1a… 支持多种文件( 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文件预览
使用网络地址预览
templatevue-office-docx :srcdocxstyleheight: 100vh;renderedrendered/
/template//引入VueOfficeDocx组件
import VueOfficeDocx from vue-office/docx
//引入相关样式
import vue-office/docx/lib/index.cssexport default {components:{VueOfficeDocx},data(){return {docx: http://static.shanhuxueyuan.com/test6.docx //设置文档网络地址可以是相对地址}},methods:{rendered(){console.log(渲染完成)}}
} 上传文件预览
读取文件的ArrayBuffer
templatedivinput typefile changechangeHandle/vue-office-docx :srcsrc//div
/templateimport VueOfficeDocx from vue-office/docx
import vue-office/docx/lib/index.cssexport 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的使用方式一致。
