用appcan开发的app如何在手机上查看附件和预览附件呢?今天就为大家介绍一下,用APP看附件实大是太方便了。

1、直接上代码吧,首先要初始化插件用到的所有方法。这个方法中

cbIsFileExistByPath 是判断文件是否存在时的回调函数。如果不存在就到服务器上去下载,如果存在就直接打开。
cbCreateDownloader 创建下载对象回调,
onStatus 是下载状态的回调,在这里面我个可以在页面上加入下载的进度条。
 
        //初始化
appcan.ready(function () { initLoadDown();
});
var docName;
var savePath;
var serviceUrl;
var id; function initLoadDown() {
var cText = 0;
var cJson = 1;
var cInt = 2;
uexFileMgr.cbIsFileExistByPath = function (opId, dataType, data) {
if (data == 0) {
//不存在
appcan.window.openToast("正在加载", 2000, 5, 1);
uexDownloaderMgr.createDownloader(id);
} else if (data == 1) { appcan.window.openToast("正在打开", 1000, 5, 1);
uexDocumentReader.openDocumentReader(savePath);//打开 } else {
appcan.window.openToast("出错啦", 2000, 5, 0);//出错//出错
}
} uexDownloaderMgr.cbCreateDownloader = function (opCode, dataType, data) {
switch (dataType) {
case cText:
alert("uex.cText");
break;
case cJson:
alert("uex.cJson");
break;
case cInt:
var headJson = '{"Content-type":"application/json;charset=utf-8"}';
uexDownloaderMgr.setHeaders(1, headJson);
uexDownloaderMgr.download(id, serviceUrl, savePath, 1); break;
default:
appcan.window.openToast("出错啦", 2000, 5, 0);//出错
}
}
uexDownloaderMgr.onStatus = function (opCode, fileSize, percent, status) {
switch (status) {
case 0:
document.getElementById('percentage').innerHTML = "<span style='color:green'>下载进度:" + percent + "%</span>";
break;
case 1:
uexDownloaderMgr.closeDownloader(id);
uexDocumentReader.openDocumentReader(savePath); break;
case 2:
appcan.window.openToast("下载失败,系统中找不到该文件", 2000, 5, 0);
uexDownloaderMgr.closeDownloader(id);
break;
case 3:
appcan.window.openToast("下载取消", 2000, 5, 0);
break;
}
}
}

2、用户在点击文件时时肯定会触发单击事件。这里是所有预览开始方法。只要判断文件是否存在就行了,他们自动触发1中的回调函数cbIsFileExistByPath

savePath 是你手机上文件的保存路径,serviceUrl是服务器中文件的路径。参数name是文件件,id随便给一个值就行,可能是为了在手机上区分不同文件。v是时间戳加文件名(存入数据的名字和存在服务器中的名字)

function openDocument(v, name) {
savePath = "wgt://data/down/" + name;
id = 2;
var d = new Date();
var _year = d.getFullYear();
serviceUrl = GetApprovalServiceHostIp() + "/upload/"+ _year +"/" + v;
uexFileMgr.isFileExistByPath(id, savePath);//根据路径判断文件是否存在
};

3、代码已完成了,因为很多功能都是APPCAN公共的插件帮我们完成了,那我就要在打包是加入这些插件。

重要事件:有需要微信投票、阅读量、注册、点赞的朋友可以找我哦,百万水军。tel/vx:18963948278

appcan 文件下载与预览的更多相关文章

  1. minio + kkFileView 实现在线预览

    minio上传的pdf之类文件不支持预览,地址在浏览器访问时会直接下载,现在搭配kkFileView文件预览 1.minio查看之前的安装方式 2.kkFileView安装 docker方式 1.拉取 ...

  2. nginx,文件下载,预览,防止浏览器下载时直接打开,防止预览时直接下载文件,解决nginx谷歌浏览器不支持下载问题

    公司项目逐渐增多,对效率的要求越来越高,不同项目分部不同服务器,最初想用nginx 就是为了多个项目用一个url和服务器宕机解决方案 nginx也可作为附件服务器,毕竟nginx也对静态文件支持较好, ...

  3. 使用canvas实现图片预览、缩放(压缩)以及生成文件下载

    参考 https://www.runoob.com/html/html5-canvas.html https://www.cnblogs.com/yuanzhiguo/p/8288822.html h ...

  4. 解决 Asp.Net5 在视频文件下载预览时无法快进的问题

    前情提要 https://www.cnblogs.com/puzhiwei/p/15265005.html 在解决.Net5 如何修改Content-Disposition实现在线预览的功能后,我又遇 ...

  5. 实战动态PDF在线预览及带签名的PDF文件转换

    开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...

  6. [SWF]在线预览文档下载

    写本文的缘由:领导有些项目文档需要审阅,网站上的文档只能在线预览,没有提供下载.开始用截屏的方式,可想而知这将会是多大的重复性劳动.所以研究了一下,发现可以曲线救国,所以在这里分享一下. 问题描述:这 ...

  7. uploadify插件实现多个图片上传并预览

    使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...

  8. Java实现文件的预览

    最近项目需要用到文件的预览功能,就开始在网上收集资料,学习了几种文件预览的方法.我集成到我项目内测试的有以下三种,最后使用的是第三种: 直接使用别人提供的服务 例如:office web 365 使用 ...

  9. 动态PDF在线预览

    实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...

随机推荐

  1. cni-ipam-etcd demo

    链接:https://github.com/jeremyxu2010/cni-ipam-etcd 测试demo: package main import ( "fmt" " ...

  2. 浅谈Docker(二)

    Docker使用cgroup实现CPU,内存和磁盘IO等系统资源的限制. CPU Docker现在有2个与CPU资源相关的参数,-c可以指定CPU的占比,--cpuset可以绑定CPU.例如,指定容器 ...

  3. 使用log4j将数据流入flume

    最近做了一个log抽取的项目,采用log4j+flume实现,在此分享记录一下. 准备 什么是flume? flume是一个提供高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统. flume ...

  4. Java多线程_wait/notify/notifyAll方法

    关于这三个方法,我们可以查询API得到下列解释: wait():导致当前的线程等待,直到其他线程调用此对象的notify( ) 方法或 notifyAll( ) 方法或者指定的事件用完 notify( ...

  5. 消息型中间件之RabbitMQ基础使用

    1.概念 RabbitMQ是AMQP(高级消息队列协议)协议的实现主要功能用于分布式应用当中的各组件间解耦.在传统C/S架构中,如果客户端发送一个请求消息,服务端必须得在线,有了中间件,客户端不是非得 ...

  6. 揭秘日活千万腾讯会议全量云原生化上TKE技术实践

    腾讯会议,一款联合国都Pick的线上会议解决方案,提供完美会议品质和灵活协作空间,广泛应用在政府.医疗.教育.企业等各个行业.大家从文章8天扩容100万核,腾讯会议是如何做到的?都知道腾讯会议背后的计 ...

  7. 【Android】SwipeRefreshLayout的简单使用教程。下拉刷新控件炫酷效果。

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...

  8. NGUI List优化

    腾讯是如何做 Unity 手游性能优化的 https://juejin.im/entry/5774af485bbb50005925a3b1 Unity - NGUI - 优化ScrollView的一些 ...

  9. 深入了解Kafka【一】概述与基础架构

    1.概述 Kafka是一个分布式的.基于发布订阅的消息系统,主要解决应用解耦.异步消息.流量削峰等问题. 2.发布订阅模型 消息生产者将消息发布到Topic中,同时有多个消息消费者订阅该消息,消费者消 ...

  10. 深入了解Netty【四】IO模型

    引言 IO模型就是操作数据输入输出的方式,在Linux系统中有5大IO模型:阻塞式IO模型.非阻塞式IO模型.IO复用模型.信号驱动式IO模型.异步IO模型. 因为学习Netty必不可少的要了解IO多 ...