vue项目,内网预览.xls .pptx .ppt .doc .docx .xlsx等格式的文件方法推荐

方式.常规预览：

图片，视频，pdf,页面等常规文件，直接用iframe标签就行了，但是word,ppt,exl等文件在iframe下直接下载下来，这个和预期的功能不符合，所以，我们需要对word,ppt,exl等文件进行处理,下面是获取文件后缀名的方法

      //后缀名判断getFileExtendingName (filename) {// 文件扩展名匹配正则var reg = /\.[^\.]+$/;var matches = reg.exec(filename);if (matches) {return matches[0];}return '';},

方式2.kkFileView

kkFileView开源在线预览文件，这个方法是开源的，在文件较大的情况下，加载速度比价慢

kkFileView官网文档：https://kkfileview.keking.cn/zh-cn/docs/production.html

template中

<iframe  :src="previewUrl" class="iframe_left"  v-show="flieShow"  frameborder="0"></iframe>

js代码

//在main.js文件下配置全局文件地址，地址是调用的后端的本机地址，端口8012不需要改
Vue.prototype.$wordUrl="http://*******:8012"
//ressss 是要预览的文件地址
//this.previewUrl 是定义在iframe标签上的路径，
this.previewUrl=this.$wordUrl+'/onlinePreview?url='+encodeURIComponent(BASE64.encode(ressss))

方式3.docx-preview

此方法只针对word文档，相对于kkFileView的好处是，速度要比使用kkFileView快很多

安装依赖

npm i docx-preview --save

在组件中script最开始引入

// 引入docx-preview插件
let docx = require("docx-preview");

当文件后缀为.docx时，执行方法

//查看word文件//e为文件地址Checkdocx(e){this.$axios.post("*******",{location:e},{responseType: "blob"}).then(({data})=>{docx.renderAsync(data, this.$refs.file); })},

html代码

 <div class="iframe_left"  ref="file"></div>

方式4.文件转ptf

此方法的思路就是传文件路径给后端，后端转成ptf后返回pft路径，在预览之后调用删除接口在删除ptf,因为ptf在iframe标签中可以直接展示。

vue项目,内网预览.xls .pptx .ppt .doc .docx .xlsx等格式的文件方法推荐相关推荐

vue+iview 内网预览(本文重点)+外网预览word、excel、pdf、ppt
访问内网文件思路如下: 1.后端将word.excel.pdf文件转为二进制文件流前端将文件流转为html从而实现文件预览 2.pdf没这么复杂具体可看下文 3.ppt的实现方式是后端将ppt转为p ...
vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...
vue项目实现打印预览、生成（导出）文档功能
这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,但一直没时间,今天总算闲了一点,趁一大早活还没找上门来,赶紧抓住时间鸭! 1.打印预览打印预览说白就是实现快速跳转新页面预览信息 ...
Vue项目实现在线预览pdf，并且可以批量打印pdf
最近遇到一个需求,就是要在页面上呈现pdf内容,并且还能用打印机批量打印pdf,最终效果如下: 当用户在列表页面,勾选中两条数据后,点击"打印表单"按钮之后,会跳到如下的预览页面: ...
Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等
前言 PDF.TXT 只要资源可访问,根本就不需要进行任何处理,直接访问查看就完事了. 也是因为这个PDF可以直接查看(现在浏览器基本支持了),那么我们实现Word文档在线预览,其实也是把WORD文 ...
【学习记录20】vue使用blob流预览word ，Excel，pdf，TXT，图片，视频
TXT,PDF直接使用浏览器本身预览 excel使用插件 xlsx,这个插件需要用到arraybuffer的流格式,我是使用前端转换的详见js代码,也可以叫后台返回arraybuffer的数据流 wo ...
Vue中使用pdfJs预览PDF、图片
Vue中使用pdfJs预览PDF.图片 pdf.js是一个使用HTML5构建的可移植文档格式库.它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能. 实现步骤如下: 1.下载pdfJ ...
vue实战--vue+elementUI实现多文件上传+预览（word/PDF/图片/docx/doc/xlxs/txt）
需求最近在做vue2.0+element UI的项目中遇到了一个需求:需求是多个文件上传的同时实现文件的在线预览功能.需求图如下: 看到这个需求的时候,小栗脑袋一炸.并不知道该如何下手,之前的实践项 ...
fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...