2016-12-15 44 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 
     }); 
    } 
} 

现在,这将是位充满意义的编译引擎了解