使用PhoneGap下载文件并在AngularJS中使用

Download file with PhoneGap and use within AngularJS

本文关键字：AngularJS PhoneGap 下载 文件 使用      更新时间：2023-09-26

我正在用AngularJS构建一个PhoneGap/Cordova应用。我花了大量时间研究如何成功地将远程文件下载到设备上。下面是我的代码:

download: function() {
    console.log('start download');
    var remoteFile = "http://remoteserver.domain";
    var localFileName = "file.json";
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getFile(localFileName, {create: true}, function(fileEntry) {
            var localPath = fileEntry.toURL();
            var ft = new FileTransfer();
            ft.download(remoteFile,
                localPath, 
                function(entry){console.log(entry)}, 
                function(error){console.log(error.code)}
            );
        }, function(error){console.log(error.code)});
    }, function(error){console.log(error.code)});
}

对于iOS，文件系统API返回的文件的本地路径是我的应用程序的Documents文件夹。但是因为我使用AngularJS，它在Appname内的www文件夹中运行。app文件夹，我不知道如何从AngularJS中访问该文件，以便它也可以在PhoneGap支持的Android和其他操作系统中开箱运行。

所以我要做的是告诉File API将文件保存在Appname中。app/www文件夹，或者告诉AngularJS使用../Documents/文件夹，但不特定于平台。也许我可以使用一个完全不同的解决方案?

我们已经实现了类似的功能在我们的应用程序，下面的代码会给你的想法

    $rootScope.download = function(ii,catalogs)
{
    var len = catalogs.length;
    if(ii==len)
    {
        localStorage.setItem("catalogdwnld", 1);
            if($rootScope.loadingmodal){
                $rootScope.loadingmodal.opened.then(function () {
                  $rootScope.loadingmodal.dismiss( "cancel" );
            });
        }
    }
    else if(ii < catalogs.length){

    var id = catalogs[ii].id;
    /**/
        if(catalogs[ii].parentId==0)
        {
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess, fileSystemFail);
                function fileSystemSuccess(fileSystem) {
                var directoryEntry = fileSystem.root; // to get root path to directory
                            directoryEntry.getDirectory("catalogs", {create: true, exclusive: false}, onDirectorySuccess, onDirectoryFail);
                            // root directory path
                            var rootdir = fileSystem.root;
                            var fp = rootdir.toURL();
                            // storing images in catalogs folder
                            fp = fp+"/catalogs/"+id+".png";
                            var fileTransfer = new FileTransfer();
                            fileTransfer.download($window.service_url+"/catalog/cover/"+id+"",fp,  
                                function(entry) {
                                        var native_url = entry.toNativeURL();
                                /*****  Store it in db *******/ 
                                },
                                function(error) {
                                    navigator.notification.alert(
                                    'Download failed, please try again',
                                    null,         
                                    'Download Failed',   
                                    'OK');

                                }
                            );
                }
        }
}

获取根目录路径，可以使用

fileSystem.root;

我们将本地路径存储在db中，以便我们以后可以使用它来显示图像。如果你不让你的应用程序离线，那么你可以使用html4'5 localstorage。

我们已经在android和ios上测试了上面的代码，所以它应该可以在平台上工作。

谢谢. .

在Cordova中也有下载文件的ng服务。使用cordova文件api。在Android和iOS上测试。提供下载单个文件或文件数组的方法。

https://github.com/verico/ng-cordova-file-downloader

这个AngularJS模块使用cordova文件API， 不需要文件传输插件。您可以创建几个队列来下载文件，并在文件下载后执行任何操作，并且有很好的文档。

downgularJS - https://github.com/kaikcreator/downgularJS

相关文章：