Vue实现预览文件(Word/Excel/PDF)功能的示例代码 |
您所在的位置：网站首页 › filereaderreadasdataurl › Vue实现预览文件(Word/Excel/PDF)功能的示例代码 |
|
Vue实现预览文件(Word/Excel/PDF)功能的示例代码
之前也有写过两篇预览pdf的，但好像还没写过预览word和excel的，但是这次的预览pdf和之前的三个又不一样！使用pdfobject预览pdf ，Vue使用vue-pdf实现PDF文件预览，Vue使用pdf-lib为文件流添加水印并预览，这是之前写的三篇，大家有兴趣也可以去看看，总会有一个适合的！ 这次刚找到三个兄弟库，分别是预览word、Excel、pdf文档的，用着很好用，但是word这个好像是有点儿bug但还不确定，因为有的能加载出来有的加载不出来，还需要验证。其他两个应该是没什么问题的，使用起来也很简单，下面来介绍一下： 安装 //docx文档预览组件 npm install @vue-office/docx vue-demi //excel文档预览组件 npm install @vue-office/excel vue-demi //pdf文档预览组件 npm install @vue-office/pdf vue-demi 引入组件、注册 引入进来是个组件，注册一下就可以直接使用了 // docx文档引入、注册 import VueOfficeDocx from '@vue-office/docx' import '@vue-office/docx/lib/index.css' export default { components: { VueOfficeDocx } } // excel文档引入、注册 import VueOfficeExcel from '@vue-office/excel' import '@vue-office/excel/lib/index.css' export default { components: { VueOfficeDocx } } // pdf文档引入、注册 import VueOfficePdf from '@vue-office/pdf' export default { components: { VueOfficeDocx } }其实都是一样的，很简单！ 使用 使用的时候，我们直接使用上面注册的组件，然后给其src复制就可以了，src就是我们要预览的文件的路径，文件路径其实也有很多种方式，我这里提供三种方式，分别是通过1、window.URL.createObjectURL将文件流Blob对象转为一个路径。2、通过FileReader类来进行加载获取base64编码等。3、通过调用Blob对象的arrayBuffer方法获取到文件的buffer进行赋值。 下面直接上完整代码了，大家稍微一看都懂啦。我这里测试的还是从本地选择的文件，从服务器获取文件也是一样的，设置responseType为"blob"，返回的也就是文件流Blob对象，操作其实是一样的，我示例中给src赋值的方式给出了三种，到时候选择一种用就可以了。下面上完整代码： import VueOfficeDocx from '@vue-office/docx' import '@vue-office/docx/lib/index.css' import VueOfficeExcel from '@vue-office/excel' import '@vue-office/excel/lib/index.css' import VueOfficePdf from '@vue-office/pdf' export default { data() { return { src: '' } }, components: { VueOfficeDocx, VueOfficeExcel, VueOfficePdf }, mounted() { this.addInputEventListener() }, methods:{ /** * application/msword;charset=utf-8 * application/pdf;charset=utf-8 * application/vnd.ms-excel */ addInputEventListener() { const input = document.querySelector('#input') input.addEventListener('input', e => { const fileBlob = e.target.files[0] // 第一种方式（通过window.URL.createObjectURL将Blob文件流转为一个路径） this.src = window.URL.createObjectURL(new Blob([fileBlob])) // 第二种方式（转为base64编码） const fileReader = new FileReader() fileReader.readAsDataURL(fileBlob) fileReader.onload = e => { this.src = e.target.result } // 第三种方式（获取到buffer） fileBlob.arrayBuffer().then(buffer => { this.src = buffer }) }) } } } .index { width: 100%; height: 100%; padding: 15px; box-sizing: border-box; } .select-file { width: 100%; height: 35px; border-bottom: 1px dashed #ccc; margin-bottom: 15px; } .file-preview { width: 100%; height: 650px; border: 1px dashed #007acc; }以上就是Vue实现预览文件(Word/Excel/PDF)功能的示例代码的详细内容，更多关于Vue预览文件的资料请关注编程宝库其它相关文章！ 下一节：vue3+viteassets动态引入图片的三种方法及解决打包后图片路径错误不显示的问题JS 编程技术vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打 ... |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |