cordova问题之VueAPP项⽬使⽤cordova插件实现⽂件图⽚下载功能⼀、问题
VueAPP 中有⼀个⽂件下载功能，⽤了各种⽅法来实现下载功能，app 都没有反应。
这个博客⾥⾯⼏乎包含了我试过的⼤部分⽅法，发现 PC 端没问题，⼿机不可以。
⼆、经过
这些⽅法 PC 端没问题，安卓就不⾏，问了⼀个接触过安卓的后台⼩伙伴，说是需要⽤ app 调起浏览器，让⼿机⾃带的浏览器下载⽂件。
这种⽅法对于安卓来说很是友好，前端暂时没发现可以调⽤的⽅法。。
三、结果
使⽤ cordova 下载⽂件的插件，通过获取安卓写⼊权限，再调⽤⽂件传输、打开⽂件等 cordova 插件，来实现 VueAPP 下载⽂件/图⽚的功能
cordova 的安装这⾥就不写了，官⽹和 w3c 很多详细的步骤
下载⽂件所需 cordova 插件：
cordova-plugin-android-permissions：获取权限的插件，
cordova-plugin-file：⽤于操作⽤户设备上的本机⽂件系统，w3c有
cordova-plugin-file-transfer：⽤于上传和下载⽂件，具体看
cordova-plugin-file-opener2：打开⽂件系统插件
四、vue 调⽤ cordova 的具体⽅法
⾸先，在 vue 项⽬中添加 npm 依赖包
npm install --save vue-cordova
下载完成后，在 main.js ⾥⾯引⼊插件
然后，在 main.js ⾥⾯引⼊调⽤ cordova 插件具体功能的代码，⽅便全局调⽤
// cordovaPlugins.js CODE
//接⼝封装 -- 简单的封装下，⽤于测试功能是否ok
// 设备信息
function appGetLocation(result){
cordovaDevice()
function cordovaDevice(){
function cordovaDevice(){
console.log("Cordova version: "+ dova +"\n"+
"Device model: "+ del +"\n"+
"Device platform: "+ device.platform +"\n"+
"Device UUID: "+ device.uuid +"\n"+
"Device version: "+ device.version);
return{
"Device model: ": del,
"Device version: ": device.version
}
}
}
// 下载⽂件 txt,doc,jpg
function downloadFileHH(URL,NAME){
// 下载路径
let url ="221.2.140.133:8999/"+URL;
url =encodeURI(url)
let filename =NAME;// ⽂件名
//APP下载存放的路径，可以使⽤cordova file插件进⾏相关配置
var targetPath = alRootDirectory + filename;
var fileTransfer =new FileTransfer();
fileTransfer.download(
url, targetPath,function(entry){
console.log("download complete: "+ URL());
// 打开⽂件系统插件，打开下载下来的APP
cordova.plugins.fileOpener2.open(
targetPath,
安卓下载app
'application/vnd.android.package-archive',
{
error:function(e){
alert('Error status: '+ e.status +' - Error message: '+ e.message);
},
success:function(){
alert('下载成功！');
}
}
);
},
function(error){
console.log(error)
console.log("download error source "+ error.source);
alert("download error target "+ error.target);
console.log("download error code"+ de);
},
false,{
headers:{
"Authorization":"Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
}
}
)
;
}
// 检查权限
function checkedPermiss(url, name){
var permissions = cordova.plugins.permissions;
//校验app是否有安卓写⼊权限
permissions.checkPermission(permissions.WRITE_EXTERNAL_STORAGE,function(s){ //hasPermission 验证是否成功
//hasPermission 验证是否成功
if(!s.hasPermission){
//没有权限
var errorCallback=function(){
alert('没有存储权限！');
// alert('Storage permission is not turned on');
}
//app申请写⼊权限
//申请成功后，下载⽂件
downloadFileHH(url, name);
}
else{
//申请失败，给予提⽰
errorCallback();
}
},function(error){
console.log(error,'')
});
}else{
//拥有权限，下载⽂件
downloadFileHH(url, name);
}
},function(error){
console.log(error,'')
});
}
// 返回在vue模板中的调⽤接⼝
export default{
cordovaGetLocation:function(res){
return appGetLocation(res)
},
downloadFileHH:function(url, name){
return checkedPermiss(url, name)
}
}
具体调⽤，在 vue 组件中，eg：
五、最后
在⽂件下载时，可能遇见各种bug，如：
第⼀调⽤下载功能，只下载了⽂件相关的插件，调⽤后报 Permission denied 还有些问题，可能是插件版本更新后，⽅法有变动，可以参考官⽅⽂档

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。