最近在搞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