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

问题背景：

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

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

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

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

kkFileView - 在线文件预览

前端：实现如下，如果需要需改打开窗口的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：

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

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

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

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

Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
移动端和web端测试有什么区别
移动端和web端测试有什么区别单纯从功能测试的层面上来讲的话,APP 测试.web 测试在流程和功能测试上是没有区别的. 根据两者载体不一样,则区别如下: 系统结构方面 web项目,b/s架构,基 ...
pc端／web端／移动端
参考连接: pc端/web端/移动端开发区别在于什么? - 知乎 (zhihu.com) 移动端是手机端吗(移动端是手机端吗)_公会界 (ghjie.com) (35条消息) 什么是移动端,它和pc端 ...
JAVA版WMS物流仓储管理系统源码，包含PDA端和Web端
JAVA版WMS仓储管理系统源码物流仓库管理系统源码源码免费分享,需要学习可私信. 一.源码介绍: 基于JAVA开发的物流仓库管理系统(支持自营和第三方),包含PDA端和Web端.WMS在经过多家 ...
Hikvison对接NVR实现WEB无插件开发包实现前端视频预览(html、vue、nginx代理)
场景 Vue中预览HIKVSION海康威视的NVR(网络硬盘录像机)中多个通道(摄像机)的视频: Vue中预览HIKVSION海康威视的NVR(网络硬盘录像机)中多个通道(摄像机)的视频_霸道流氓气质 ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
servlet实现文件上传，预览，下载和删除
一.准备工作 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数据转 ...
web项目使用OpenOffice实现前端在线预览office文档(超详细)
超详细的OpenOffice实现前端在线预览office文档记录最近搞一个数字化共享平台,是一个java web项目,使用框架ssm,其中项目有一个需要在线预览PDF.excle.ppt.word文 ...
uploadify java 下载_uploadify java实现多文件上传和预览
本文实例为大家分享了java文件上传和预览实现代码,供大家参考,具体内容如下 1.下载uploadify插件 2.index.html #uploader { position: relative; ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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