cordova问题之VueAPP项目使用cordova插件实现文件/图片下载功能

一、问题

 VueAPP 中有一个文件下载功能,用了各种方法来实现下载功能,app 都没有反应。

JS 实现 html 页面点击下载文件

这个博客里面几乎包含了我试过的大部分方法,发现 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() {
    console.log("Cordova version: " + device.cordova + "\n" +
      "Device model: " + device.model + "\n" +
      "Device platform: " + device.platform + "\n" +
      "Device UUID: " + device.uuid + "\n" +
      "Device version: " + device.version);
    return {
      "Device model: ": device.model,
      "Device version: ": device.version
    }
  }

}

// 下载文件 txt,doc,jpg
function downloadFileHH(URL, NAME) {
  // 下载路径
  let url = "http://221.2.140.133:8999/" + URL;
  url = encodeURI(url)
  let filename = NAME; // 文件名
  //APP下载存放的路径,可以使用cordova file插件进行相关配置
  var targetPath = cordova.file.externalRootDirectory + filename;

  var fileTransfer = new FileTransfer();

  fileTransfer.download(
    url, targetPath, function(entry) {
      console.log("download complete: " + entry.toURL());
      // 打开文件系统插件,打开下载下来的APP
      cordova.plugins.fileOpener2.open(
        targetPath,
        '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" + error.code);
    },

    false, {
      headers: {
        "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
      }
    }
  );
}


// 检查权限
function checkedPermiss(url, name) {
  var permissions = cordova.plugins.permissions;
  //校验app是否有安卓写入权限
  permissions.checkPermission(permissions.WRITE_EXTERNAL_STORAGE, function(s) {
    //hasPermission 验证是否成功
    if (!s.hasPermission) {
      //没有权限
      var errorCallback = function() {
        alert('没有存储权限!');
        // alert('Storage permission is not turned on');
      }
      //app申请写入权限
      permissions.requestPermission(permissions.WRITE_EXTERNAL_STORAGE, function(s) {
        if (s.hasPermission) {
          //申请成功后,下载文件
          downloadFileHH(url, name);
        }
        else {
          //申请失败,给予提示
          errorCallback();
        }
      }, function(error) {
        console.log(error, 'error...')
      });
    } else {
      //拥有权限,下载文件
      downloadFileHH(url, name);
    }
  }, function(error) {
    console.log(error, 'error......')
  });

}

// 返回在vue模板中的调用接口
export default {
  cordovaGetLocation: function (res) {
    return appGetLocation(res)
  },
  downloadFileHH: function (url, name) {
    return checkedPermiss(url, name)
  }
}
具体调用,在 vue 组件中,eg:

在这里插入图片描述


在这里插入图片描述

五、最后

在文件下载时,可能遇见各种bug,如:

第一调用下载功能,只下载了文件相关的插件,调用后报 Permission denied
cordova之File Transfer (Permission denied) 权限导致下载失败

还有些问题,可能是插件版本更新后,方法有变动,可以参考官方文档

原文地址:https://blog.csdn.net/yan263364/article/details/88891805

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


公司前端界面用的是vue,我要嵌入到Android中生成App第一步:安装nodenode安装:直接进入官网https:/odejs.org/zh-cn/,下载最新版本安装。安装之后在命令行中使用”node-v”检查安装是否成功。npm安装:由于新版的nodejs已经集成了npm,所以node安装时npm也一并安装好了。同样可以通过输
Q:我用cordova开发项目,想在app内跳转外部链接,安装了cordova-plugin-inappbrowser后确实可以跳转,但是跳转的页面有个按钮,原本点击会下载app,现在点击后毫无反应,求大神解惑。A:已经找到解决办法了,把cordova.InAppBrowser.open的打开网页方式改为“_system”即可,即用手机默认浏览器打
我正在使用https://github.com/arnesson/cordova-plugin-firebase/在基于离子的应用上接收GoogleFirebase消息.设置证书后,安装插件并设置Firebase帐户我能够通过Firebase控制台接收通知(在Android和ios设备上).但是,当我通过FirebaseAPI(https://firebase.google.com/docs/clo
一、Cordova的基础点在混合式应用中,我们通过现有的Cordova插件,可以轻松的在H5上调用手机native的功能。现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合适的插件、或对找到的插件有不满意的地方,那就要动手去做或改写一个插件,这时候就要了解一些Cordova插件的
cordova自定义插件注意:存放自定义cordova插件目录不能有空格可能会报错cordova的安装下载node.js,安装完成后你可以在命令行中使用node和npm.安装cordova使用node.js的npm工具。打开控制台输入npminstall-gcordova-g是全局安装cordova。安装完成后就可以在命令行
一、问题VueAPP中有一个文件下载功能,用了各种方法来实现下载功能,app都没有反应。JS实现html页面点击下载文件这个博客里面几乎包含了我试过的大部分方法,发现PC端没问题,手机不可以。二、经过这些方法PC端没问题,安卓就不行,问了一个接触过安卓的后台小伙伴,说是
helloindex.html1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>我的App<itle>6<metaname="format-detection"content="telephone=no&q
1.plugman安装npminstall-gplugman如果提示permissiondenied需要加sudosudonpminstall-gplugman2.创建插件sudoplugmancreate--name插件名--plugin_id插件id--plugin_version0.0.13创建package.json文件cd上面床架的插件文件夹下,plugmancreate
最近学习了cordova插件,记录一下大概的过程,仅供参考。前期的配置就不记录了网上好多。在简书上从新写了一个更详细的cordova插件教程,有需要的可以点这里进去看看。第一步创建一个cordova项目输入命令:cordovacreate项目名包名例子:cordovacreatedemocom.zc.demo项目的大概目
我知道这个链接:https://cordova.apache.org/docs/en/latesteference/cordova-plugin-file/#where-to-store-files但我想将文件保存在Downloads目录中.这可以使用Ionic在任何路径中保存文件吗?如果是这样,请分享这个例子.这是代码:downloadImage(image){this.platform.ready(
我想在我的HTML5PhonegapJavaScript应用程序中添加状态栏通知.可能吗?解决方法:Ourteam已发布用于phonegapAndroid状态栏通知的插件.https://github.com/phonegap/phonegap-plugins/commits/master/Android/StatusBarNotification
使用cordova-plugin-geoloaction插件我正在检索用户在其移动设备上的位置.我的onSuccess()函数返回纬度和经度,现在我想在应用程序中显示相应的地址:<scripttype="text/javascript"charset="utf-8">//WaitfordeviceAPIlibrariestoload//document.addEventListe
我正在检查Android的PhoneGapAPI,并正在尝试相机示例应用程序示例并安装在我的Android手机(2.1GalaxyS)中.然而,在运行应用程序并拍照后,未检索到图像.根据我在代码中的理解,拍摄照片后,图像将显示在按钮下方60×60.我尝试在警报消息中打印出base64值,但我也没有得到任何响应(也
我刚刚在Eclipse中创建了一个包含所有phonegap和cordova文件的Android项目.但是,我没有这样的目录,因此没有config.xml.根据ApacheCordova文档,它应该位于:app/res/xml/config.xml.对于/res目录,我的文件夹结构如下:es/drawable-hdpies/drawable-ldpies/drawable-
我正试图在phonegap中设置一个新的开发环境.以下是我的路径变量设置在Windows中的外观:C:\Users\Mrinal\AppData\Roaming\npm;C:\android\development\sdk\platform-tools;C:\android\development\sdk\tools;C:\ProgramFiles\Java\jdk1.7.0_17\bin;C:\ant\bin现在在第三行
我正在将Worklight用于Android应用程序,当我尝试添加启动画面时publicclassMyAppextendsWLDroidGap{@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);super.setIntegerProperty("splashscreen",
我正在创建一个可在所有3个移动平台(Android,iOSa和WindowsMobile8)上运行的HTML5移动应用程序.我正在使用javascript进行本地化(https://github.com/eligrey/l10n.js/#readme).该应用程序在浏览器上正常工作.但是当我在移动模拟器上部署它时,本地化不起作用.我认为问题是java
我有通过cordova成功构建的代码.但是,当我尝试模拟它时,我收到此错误“错误:cmd:命令失败,退出代码为1”.关于如何解决这个问题的任何想法?Hereismyoutputfromattemptingtoemulatethecode解决方法:我有同样的问题.看起来你没有任何AVD在运行.我不认为ionic的教程指定你需要这
我尝试添加各种标签并尝试添加相对路径:’//’这些是我尝试过的各种元标记<metahttp-equiv="Content-Security-Policy"content="default-src'self'"><metahttp-equiv="Content-Security-Policy"content="style-src'self''u
我正在Cordova/PhoneGap中编写一个应用程序,它试图使用Dropbox.js从Dropbox获取文件.Cordova版本为3.0.1,Dropbox.js版本为0.10.0.我的Javascript在桌面浏览器上工作得很好:varclient=newDropbox.Client({key:"<mykey>",secret:"<mysecret>"});client.authenticate