当前位置: 首页 > Web前端 > JavaScript

前端js实现docx、xlsx、pdf等类型文件的预览,VUE组件

时间:2023-03-27 00:44:39 JavaScript

都2023年了,预览文件怎么这么难!发现问题后,想能不能实现一个简单的VUE组件库,解决以上问题,让前端新手也能非常高效的完成文件预览任务。因此,我期望开发一个vue-office组件库,必须满足以下三个要求。一定要使用简单,对新手友好,就是传递一个文件地址,实现预览。提供一站式多文件预览解决方案,解决常见docx、excel、pdf文件的预览效果,不仅是内容预览,还支持样式需求。实现比较简单,从github解决方案中筛选出每个文档的最优预览,然后封装成VUE组件,但是还是有很多坑,在文章的最后部分介绍。查看demo安装三个组件演示github源码,可根据需要安装//docx文档预览组件npminstall@vue-office/docx//excel文档预览组件npminstall@vue-office/excel//pdf文档预览组件npminstall@vue-office/pdf复制代码使用示例docx文档预览复制代码excel文档预览复制代码pdf文档预览复制代码的整个用法非常简单。基本上只要给定文档的src地址,或者上传文件的ArrayBuffer和Blob格式数据,就可以实现预览。详细方法见github中github源码介绍