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

妖狐艹你老母 2021-09-18 15:46 1529阅读 0赞

# 一、问题 #

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

> [JS 实现 html 页面点击下载文件][JS _ html]

这个博客里面几乎包含了我试过的大部分方法，发现 PC 端没问题，手机不可以。

# 二、经过 #

> 这些方法 PC 端没问题，安卓就不行，问了一个接触过安卓的后台小伙伴，说是需要用 app 调起浏览器，让手机自带的浏览器下载文件。

这种方法对于安卓来说很是友好，前端暂时没发现可以调用的方法。。

# 三、结果 #

> 使用 cordova 下载文件的插件，通过获取安卓写入权限，再调用文件传输、打开文件等 cordova 插件，来实现 VueAPP 下载文件/图片的功能

cordova 的安装这里就不写了，官网和 w3c 很多详细的步骤
    下载文件所需 cordova 插件：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]  
cordova-plugin-android-permissions：获取权限的插件，[相关文章推荐][Link 1]  
cordova-plugin-file：用于操作用户设备上的本机文件系统，w3c有[教程][Link 2]  
cordova-plugin-file-transfer：用于上传和下载文件，具体看[教程][Link 3]  
cordova-plugin-file-opener2：打开文件系统插件

# 四、vue 调用 cordova 的具体方法 #

###### 首先，在 vue 项目中添加 npm 依赖包 ######

npm install --save vue-cordova

###### 下载完成后，在 main.js 里面引入插件 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20190329135732831.png]

###### 然后，在 main.js 里面引入调用 cordova 插件具体功能的代码，方便全局调用 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 2]

// 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：

![在这里插入图片描述][20190329141325168.png]  
![在这里插入图片描述][20190329141438361.png]

# 五、最后 #

> 在文件下载时，可能遇见各种bug，如：

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

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

[JS _ html]: https://blog.csdn.net/sinat_29774479/article/details/78404794
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210804/76b12ce0a86447de9a03a869639507b6.png
[Link 1]: https://blog.csdn.net/qq_20663175/article/details/80368176
[Link 2]: https://www.w3cschool.cn/cordova/cordova_file_system.html
[Link 3]: https://www.w3cschool.cn/cordova/cordova_file_transfer.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]: /images/20210804/48ff8adc6ea646b1ac3399acc3fb42c8.png
[20190329135732831.png]: /images/20210804/1e3e865e430a4a19ac53ffc0cddb3760.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 2]: /images/20210804/5107ade74f67486da8399c90fd2e488d.png
[20190329141325168.png]: /images/20210804/14ed0dd74a6e4b13a939d857bbe870b3.png
[20190329141438361.png]: /images/20210804/c830d2fdf0654a07894d0e1998ba4cc4.png
[cordova_File Transfer _Permission denied_]: https://www.jianshu.com/p/042b0a479fb9