【Cordova】cordova下载-cordova-plugin -file-transfer-vue案例

安装

cordova plugin add cordova-plugin-file-transfer

文档地址：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/

代码

项目中使用的ui框架是mint-ui，功能包括：下载文件，进度条

HTML：

    下载到手机
    
    
      

        
正在下载中({{progress}}%)...
        
        
      
      取消
    

JS:

  mounted() {
    this.initialize();
  },
    data() {
    return {
      // 设备准备
      ready: false,
      // 进度条
      progress: null,
      // 显示进度条
      isProgress: false,
      //下载对象
      fileTransfer: null,
      // 下载地址
      downloadUrl: null,
      //预览数据
      previewData: {
		title:'1_michael_ouyang',
		extension:'jpg',
		file_url:'http://avatar.csdn.net/7/E/0/1_michael_ouyang.jpg'
	},
},
 methods: {
    initialize() {
      document.addEventListener(
        'deviceready',
        this.onDeviceReady.bind(this),
        false
      );
    },
    // deviceready Event Handler
    onDeviceReady() {
      this.ready = true;
    },

    // 创建文件路径
    createFilePath() {
      let _this = this;
      if (_this.ready) {
        window.requestFileSystem(
          LocalFileSystem.PERSISTENT,
          0,
          function(fs) {
            fs.root.getFile(
              _this.previewData.title + '.' + _this.previewData.extension,//下载文件名称 例：1_michael_ouyang.jpg
              { create: true, exclusive: false },
              function(fileEntry) {
                //调用fileTransfer插件，下载图片
                _this.isProgress = true;
                _this.downLoadFile(fileEntry.nativeURL);
              },
              function(err) {
                console.log('err', err);
                _this.toast('下载失败，请稍后重试');
              }
            );
          },
          function(error) {
            console.log('error', error);
            _this.toast('下载失败，请稍后重试');
          }
        );
      } else {
        _this.toast('下载失败，请稍后重试');
      }
    },
    // fileTransfer plugin
    downLoadFile(fileURL) {
      let _this = this;
      _this.progress = 0;
      // 初始化FileTransfer对象
      _this.fileTransfer = new FileTransfer();
      // 服务器下载地址
      let uri = encodeURI(_this.previewData.file_url);
      //监听下载进度
      _this.fileTransfer.onprogress = function(e) {
        if (e.lengthComputable) {
          const progress = e.loaded / e.total;
          _this.progress = (progress * 100).toFixed(2);
        }
      };
      // 调用download方法
      _this.fileTransfer.download(
        uri, //uri网络下载路径
        fileURL, //url本地存储路径
        function(entry) {
          // 手机存储地址
          _this.downloadUrl = decodeURIComponent(entry.toURL());
          if (_this.progress > 1 || _this.progress === 1) {
            _this.isProgress = false;
            // MessageBox('提示', '下载已完成，文件存储在: ' + _this.downloadUrl);
            MessageBox('下载已完成', '文件存储在手机根目录 ');
            _this.addDownRecord();
          }
        },
        function(error) {
          console.log('download error source ' + error.source);
          console.log('download error target ' + error.target);
          console.log('upload error code' + error.code);
        }
      );
    },
    /**
     * desc:取消下载
     */
    cancelDownload() {
      MessageBox.confirm('确定取消吗?').then(action => {
        if (this.isProgress) {
          this.isProgress = false;
          this.fileTransfer.abort();
          this.fileTransfer = null;
          this.progress = 0;
        }
      });
    }
  }

CSS:

/* 下载进度 */
.isProgress {
  width: 85%;
  height: 2.86rem;
  border-radius: 0.2rem;
  .m-progress {
    padding: 0.5rem 0.5rem 0;
    height: 55%;
    .tip {
      font-size: 0.28rem;
      margin-bottom: 0.25rem;
    }
  }
  .cancel {
    width: 100%;
    line-height: 3.5;
    text-align: center;
    border-radius: 0.2rem;
    border-top: 0.01rem solid #f0f0f0;
  }
}