vue 文件在线预览

方法一:word、xls、ppt文件在线预览功能

限制条件:必须是域名访问  不支持IP访问

一个url就可以访问了:

https://view.officeapps.live.com/op/view.aspx?src=文件地址

方法二:pdf文件在线预览功能

安装PDF插进  npm install --save vue-pdf

若需要预览其他格式文件需要后端转成PDF

```

```

方法三:文件在线预览功能

支持大部分格式文件

这种方法主要是后端实现  将文件预览插件打成jar包 部署到服务器上

1.环境要求:

  java 1.8+

2.部署运行:

  本机以及虚拟机上运行:

    1.从https://gitee.com/kekingcn/file-online-preview/releases地址下载最新的版发行包

    2.解压kkFileView-2.x.x.Zip包

3.打开解压后文件夹的bin目录,运行startup脚本(Windows下以管理员身份运行startup.bat,Linux以root用户运行startup.sh)

4.浏览器访问本机8012端口(http://127.0.0.1:8012)即可看到项目演示用首页

3.项目实施:

  在文件上传组件后配置预览选项


  预览

  点击方法

preView(){

var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址

   var previewUrl = originUrl + '&fullfilename='+文件名称

   window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(previewUrl));

  }

4.kkFileView文档:

https://gitee.com/kekingcn/file-online-preview/wikis/Home?sort_id=1444366

你可能感兴趣的:(vue 文件在线预览)