线上文件预览、下载

一、开发过程中 经常会遇到的一个问题就是文件预览功能
该文档提出一个效率很高的解决办法
该办法依赖于 kkFileView - 在线文件预览 (https://kkfileview.keking.cn/zh-cn/docs/production.html)
可以去它官方文档学习
这个办法需要前后端共同解决
1.后端同学的操作

从kkFileView官网 – 快速部署 – 部署出查看文件的预览接口
将预览接口提供给前端同学
如：（http://127.0.0.1:8012/onlinePreview?url=’+encodeURIComponent(fileUrl )）

2.前端同学的操作

当您的项目内需要预览文件时，只需要调用浏览器打开本项目的预览接口，并传入须要预览文件的url，示例如下：

//1.利用 window.open  浏览器打开新窗口预览文件
 var fileUrl = 'http://127.0.0.1:8080/file/test.txt'; //要预览的文件地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(fileUrl ));

2.通过iframe，预览文件
 结合elementUI的弹窗（可以做其他弹窗效果）
 dom代码：
      <el-dialog  title="文件预览" :visible.sync="dialogVisible"  width="70%" :before-close="handleClose">
          <div style="text-align:center">
            <iframe frameborder="0" :src="fileUrl"
                    width='1100' height='600'>
            </iframe>
          </div>
     </el-dialog>

  //所需的文件值
     this.fileUrl = 'http://127.0.0.1:8080/file/test.txt'; //要预览的文件地址
	this.url= http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(fileUrl )

3.如果是uniapp 开发， 使用webview加载文件预览（代替iframe）
代码逻辑跟ifarme一致。

二、下载文件
window.open(url)

经常会遇到的一个问题，当我们在vue项目中，直接使用window.open()直接传入文件地址的时候，控制台会出现一个问题，意思是open方法已经被定义过，不能重复定义；或者是open方法找不到之类的。
所以解决办法是

var open = " "; //先声明open 为 “”，，这样window.open()方法就能找到并下载。
window.open(url);