ionic實現下載文件并打開功能（file-transfer和file-opener2插件）

fengxiuping 發布于2019-08-01 18:34 / 1688人閱讀

摘要：作為一款，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用和這兩個插件能夠在比較容易的實現這個功能。

作為一款app，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用cordova-plugin-file-transfer和cordova-plugin-file-opener2這兩個插件能夠在ionic比較容易的實現這個功能。

1、安裝：

cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-file-opener2

2、代碼實現

angular.module("app").controller("accessoryDetailCtrl", ["$scope","$ionicLoading", 
  function ($scope $ionicLoading) {
    "use strict";
    
    $scope.downLoadFile = (downloadUrl) => {
      let fileTransfer = new FileTransfer(),
        uri = encodeURI(downloadUrl), // 文件的地址鏈接
        fileUrl = cordova.file.dataDirectory + uri.substr(uri.lastIndexOf("/") + 1); // 文件的下載地址
      fileTransfer.download(uri, fileUrl, entry => {
        entry.file(data => {
          cordova.plugins.fileOpener2.showOpenWithDialog(fileURL, data.type); // showOpenWithDialog使用手機上安裝的程序打開下載的文件
        });
        console.log("download accessory successful. accessory information : " + JSON.stringify(entry));
      }, error => {
        console.error("download accessory fail. Because of : " + JSON.stringify(error));
      });

      fileTransfer.onprogress = function(progressEvent) { // 加載過程中的loading提示
        const percentFinished = 99;
        let downloadProgress = Math.round((progressEvent.loaded / progressEvent.total) * $scope.percentage);
        $ionicLoading.show({
          template: "正在下載" + downloadProgress + "%"
        });
        downloadProgress > percentFinished && $ionicLoading.hide();
      };
    };
    
  }]);

3、注意事項
file-transfer除了支持下載還有上傳文件的功能，下載的時候要注意的是下載的地址，ios和android可以路徑是不同的，可以找出相同的路徑，或者分別處理，這里使用的是cordova.file.dataDirectory，ios和android下載同一個路徑

在使用file-opener2時，需要傳入mineType，這個我們可以在file-transfer時獲取。
file-opener2除了我們使用的showOpenWithDialog方法，還有open方法調用手機自帶的打開功能，可以用來實現android的版本更新，下載新版本安裝（以后有時間在寫，網上的相關文檔也很多）
另外還有uninstall和appIsInstalled功能，項目中沒有使用，就不在研究了。

最后，在android7，android8上使用file-transfer插件有需要特殊的處理，詳細可以查看一下github
cordova-plugin-file-transfer

云服務器 GPU云服務器讀取服務器文件并下載 html實現下載功能如何連接阿里云服務器并下載文件 html下載文件插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51825.html

ionic實現下載文件并打開功能（file-transfer和file-opener2插件）

摘要：作為一款，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用和這兩個插件能夠在比較容易的實現這個功能。作為一款app，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用cordova-plugin-file-transfer和cordova-plugin-file-opener2這兩個插件能夠在ionic比較容易的實現這個功能。 1、安裝： cordova...

cfanr 2019-08-26 11:43 評論0 收藏0
Capacitor 新一代混合應用“神器” 會代替Cordova嗎？？

摘要：介紹暢想是由團隊最新開發維護的一個跨平臺的應用程序容器，可以輕松構建在，，和上本機運行的應用程序。后者旨在替代或者說是進化。希望看到在未來發展，以及正式發布。我認為它有可能大大改善混合應用開發體驗。 1.介紹or暢想 Capacitor是由ionic團隊最新開發維護的一個跨平臺的應用程序容器，可以輕松構建在iOS，Android，Electron和Web上本機運行的Web應用程序。我們...

番茄西紅柿 2019-04-23 13:14 評論0 收藏0
一個基于Angular+Ionic+Phonegap的混合APP實戰

摘要：有二維碼掃描功能，還做了類似消息可拖拽效果，上拉下拉刷新，輪播圖組件。特別適合用于基于模式的移動應用程序開發。簡介是一個用基于，和的，創建移動跨平臺移動應用程序的快速開發平臺。這個項目做得比較早，當時是基于ionic1和angular1做的。做了四個tabs的app，首頁模仿攜程首頁，第二頁主要是phonegap調用手機核心功能，第三頁模仿微信和qq聊天頁，第四頁模仿一般手機的表單設...

孫淑建 2019-08-26 11:46 評論0 收藏0
Ionic2入坑基礎教程和安裝指南

摘要：安裝程序主要通過命令行工具來創建和開發，并使用來構建和部署為原生應用程序。基礎教程確保完成之前的安裝并測試啟動成功。安裝Ionic Ionic 2 程序主要通過Ionic命令行工具CLI來創建和開發，并使用Cordova來構建和部署為原生應用程序。也就是說我們需要先安裝一些工具來實現程序開發。安裝Ionic CLI 和 Cordova 要創建 Ionic 2 項目，你需要安裝最新版...

jayce 2019-08-21 14:35 評論0 收藏0
ionic1使用ImagePicker插件并且顯示中文（漢化）

摘要：在使用開發時，打開相冊應該是使用比較頻繁的插件之一。解決辦法可以看我另一篇文章使用在安卓手機上閃退問題參考文獻之圖片選擇插件使用插件中文顯示在使用ionic開發時，打開相冊應該是使用比較頻繁的插件之一。下面講講我在項目中使用（這部分官方比較詳細，就簡單描述）以及解決插件顯示英文問題 1、imagepicker安裝cordova plugin add cordova-plugin-im...

Vultr 2019-08-26 11:41 評論0 收藏0