2016-12-15 89 views
2

局勢:Ionic 2 - 如何設置文件下載?

在我的離子2應用程序我有一個文件部分,在那裏,用戶應該能夠下載文件。

我想設置的file transfer的離子2.

的代碼:

的文件組成:

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

import { Transfer } from 'ionic-native'; 

declare var cordova: any; 

@Component({ 
    selector: 'page-documents', 
    templateUrl: 'documents.html' 
}) 

export class DocumentsPage { 

    constructor(public navCtrl: NavController) {} 

    ionViewDidLoad() { 

    } 

    downloadFile() 
    { 
     const fileTransfer = new Transfer(); 
     let url = 'http://MY_URL.com/example.txt'; 

     fileTransfer.download(url, cordova.file.dataDirectory + 'example.txt').then((entry) => 
     { 
      console.log('download complete: ' + entry.toURL()); 
     }, (error) => { 
      // handle error 
     }); 
    } 
} 

其結果是:

在瀏覽器中:

我收到以下錯誤消息:FileTransfer is not defined但可能是因爲cordova在瀏覽器中不起作用。

FileTransfer is not defined

在模擬器:

在模擬器下載似乎實際上全成。在控制檯中,我可以看到:donwload complete。但我沒有看到開始任何下載,也沒有下載文件的痕跡。

donwload complete

在設備:

在設備 - 點擊了下載後 - 什麼也沒有發生。我沒有看到任何開始下載。在文件管理器中,我看不到該文件。

問題:

我如何正確設置爲2離子文件下載?

代碼有問題嗎?

我應該在設備中看到下載開始嗎?

謝謝!

回答

1

代碼似乎沒有錯。 按照file transfer docs

注意:您不會看到使用設備上的文件瀏覽器文檔。 利用亞行:

adb shell 
run-as 
com.your.app 
cd files ls 

cordova.file.dataDirectory保存在根目錄下的應用程序的私有目錄。 如果需要,可以從應用程序對象中讀取應用程序中的文件。Check here for more

如果你希望它是對用戶公開訪問,請檢查this question

如果你想進步,你可以在API使用onProgress監聽器。

onProgress((event)=>{//do something}) 

希望能回答你的問題。

+0

感謝您的回答。所以基本上 - 如果我理解正確 - 代碼是正確的,並且下面的問題應該是:如何將文件從私人文件夾移動到公共文件夾? – johnnyfittizio

+0

順便說一句:https://github.com/apache/cordova-plugin-file應該是我需要的插件? – johnnyfittizio

+0

沒有離子本機文件傳輸使用該cordova插件。 –

0

我改變fileTransfer.download(url, cordova.file.dataDirectory + 'filename')

來解決:

fileTransfer.download(url, cordova.file.externalRootDirectory +{{appName}} + 'filename') 

見WHERE存儲文件中的鏈接https://github.com/apache/cordova-plugin-file

+0

這裏有什麼'appName',你可以發佈完整的代碼嗎? – Yasir

0

有一個在文件傳輸的插件錯誤需要安裝和需要在構造函數中創建本地訪問成員是需要聲明的。

第一步1安裝插件文件從框架文檔轉移。

第二步

import { NavController } from 'ionic-angular'; 
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer'; 
import { File } from '@ionic-native/file'; 

//import { Transfer } from 'ionic-native'; 

declare var cordova: any; 

@Component({ 
    selector: 'page-documents', 
    templateUrl: 'documents.html' 
}) 

export class DocumentsPage { 
    constructor(public navCtrl: NavController,private transfer: FileTransfer, private file: File) { 
    } 
    ionViewDidLoad() { 

    } 

    downloadFile() 
    { 
     const fileTransfer: FileTransferObject = this.transfer.create(); 
     let url = 'http://MY_URL.com/example.txt'; 

     fileTransfer.download(url, cordova.file.dataDirectory + 'example.txt').then((entry) => 
     { 
      console.log('download complete: ' + entry.toURL()); 
     }, (error) => { 
      // handle error 
     }); 
    } 
} 

現在,這將是位充滿意義的編譯引擎瞭解