vue项目用后端返回的文件流实现docx和pdf文件预览
写这篇文章的目的,是因为我比较懒,想把代码记录一下,方便日后使用;哈哈,如果你也需要,也可以复制粘贴啊,为了方便自己和需要的人知道怎么使用,我尽量写的详细一点,没有什么技术难点,就是简单的记录,万一能帮到需要的人呢,也是一件美事;
其实也就是使用了两个插件而已,docx-preview和vue-pdf,下面我们就写一下使用方法和详细的代码;
实现效果图
大家先看一下实现的效果,分别是docx文件预览和pdf文件预览;
原型是从一个table列表的操作中点击查看源文件,跳转到预览页面:
docx文件预览
pdf文件预览(可实现翻页功能)
docx-preview文件预览
首先安装docx-preview
点击【查看源文件】
在点击事件方法中,首先进行if判断文件类型,不同的文件类型走不同的逻辑,这里判断是否为.docx文件,然后进行路由跳转到文件预览页面,把id带过去;
vueDocx.vue组件
以上就是docx文件预览逻辑和代码,使用比较简单;
pdf文件预览
首先安装vue-pdf
然后新建一个vuePdf.vue组件,直接复制粘贴使用即可,样式可以根据自己需求修改,其他不用修改;
点击【查看源文件】
查看源文件方法
到此这篇关于vue项目用后端返回的文件流实现docx和pdf文件预览的文章就介绍到这了,更多相关vue docx和pdf文件预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
栏目分类
- Polkadex中文网
- ARKM中文网
你的位置:Polkadex中文网 > ARKM中文网 >