cordova打开图片,PDF等文档的方法

最近在搞cordova的项目,是vue + cordovad框架的APP,目的是为了可以方便打包和调用原生设备插件。
这个cordova 实在是难用,文档不全,教程不多。官方群没几个活人,有也不搭理,只能自己摸索

最近做到要预览图片和文档文件的功能,下面贴上代码。大家可参考;
逻辑就是先下载到本地,
再通过插件去本地打开,
在线预览的我没找到插件
图片和文档都是服务器里上面的在线地址

用到这三个插件
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-file-opener2

//如果要自定义下载的文件夹,要先创建文件夹,我是写到App.vue里面的,创建好了他不会重复创建的
  creatFile(){
		var dirUri = cordova.file.externalApplicationStorageDirectory; 手机Android/data/包名/路径
			window.resolveLocalFileSystemURI(dirUri,function (entry) {
				entry.getDirectory('自定义文件夹名字', {
					create: true,
				},function (dirEntry) {
				},onErrorGetDir)
			},errorCallback)
	
			//文件夹创建失败回调
			function onErrorGetDir(error){
				console.log("文件夹创建失败!")
			}
	
			function errorCallback(e) {
				console.log(e.toString());
			}
        
  }


//下载文件   最好加个等待框
//fileurl  网络下载地址
//name 是你这个文件的名字,可以让后端返回给你,也可以自己截取后缀名,前面的名字自己随机数定义
function downLoad(fileurl,name) {
	var fileTransfer = new FileTransfer();
	$("#toast").show();//自己写的弹框加载样式
    fileTransfer.download(
		encodeURI(fileurl), //网络下载地址
		 cordova.file.externalApplicationStorageDirectory+'cordovaFiles/' + name,//文件本地存储路径,我是放在手机Android/data/包名/下面,这样卸载APP就可以直接删了
		 //下载完成,调用方法打开
        function (fileEntry) {
			$("#toast").hide();
            preView(fileEntry);//成功调用预览
        },
        function (error) {
			alert('下载失败');
			$("#toast").hide();
            alert(JSON.stringify(error));
        },
        false,
        {
            headers: {'Authorization': `Bearer ${localStorage.getItem('CFA0')}`},
        }
    );
}



/* 预览 */
function preView(fileEntry) {
    let url;
	url = fileEntry.toInternalURL(); //需要转换cordova安卓的预览路径
	cordova.plugins.fileOpener2.open(url); //直接调用插件打开,这里打开是调用第三方app打开,会让你选择
}

我是参考这个文章实现的
感谢这个文章的作者提供的思路
https://segmentfault.com/a/1190000016986456

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值