vue 移动端和web端实现文件的点击预览而非下载

￡神魔★判官ぃ 2023-09-28 08:28 8阅读 0赞

问题背景：

h5 项目： 附件文件的下载在android点击为下载，在ios端展示为预览，需要统一展示交互为预览。

**1. 方案一：借助第三插件实现**

后端：适配kkFileView插件， 优点如下

1.  支持word excel ppt，pdf等办公文档
2.  支持txt,java,php,py,md,js,css等所有纯文本
3.  支持zip,rar,jar,tar,gzip等压缩包
4.  支持jpg，jpeg，png，gif等图片预览（翻转，缩放，镜像）
5.  支持mp3，mp4，flv等多媒体文件预览
6.  使用spring boot开发，预览服务搭建部署非常简便
7.  rest接口提供服务，跨平台特性(java,php,python,go,php，....)都支持，应用接入简单方便
8.  支持普通http/https文件下载url、http/https文件下载流url、ftp下载url等多种预览源
9.  提供zip，tar.gz发行包，提供一键启动脚本和丰富的配置项，方便部署使用
10. 提供Docker镜像发行包，方便在容器环境部署
11. 抽象预览服务接口，方便二次开发，非常方便添加其他类型文件预览支持
12. 最最重要Apache协议开源，代码pull下来想干嘛就干嘛

[ kkFileView - 在线文件预览][kkFileView -]

前端：实现如下， 如果需要需改打开窗口的title, 请参考 [如何设置浏览器打开新窗口的title][title]

const url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
    window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));

**2. 实现方案2：**

思路 请求后端接口将文件转化为图片返回给前端， 前端新建路由页面渲染图片

优点：页面样式可控，各端兼容性优

缺点：不持支多媒体文件的预览

[kkFileView -]: https://kkfileview.keking.cn/zh-cn/docs/usage.html
[title]: https://blog.csdn.net/yyXieDaiMa/article/details/125014844?spm=1001.2014.3001.5501