离子下载文件,保存到临时文件系统并使用默认应用程序打开

时间:2016-02-08 10:47:33

标签: javascript angularjs ionic-framework fileapi

我搜索的范围很广,但无法为我的用例找到合适的答案。基本上我想从我的后端下载base64编码的文件(可能是pdf,pgn,jpeg - 在下面的例子中使用pdf),将其保存到TEMPORARY fileSystem文件夹,然后打开它 - 可能使用设备上的相应应用程序(如果存在)。让/file成为以下ASP.NET MVC WebAPI控制器提供的路由:

public class FileController : ApiController
{
    // POST api/file/
    public HttpResponseMessage Post([FromBody]string fullPath)
    {
        HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
        var stream = new FileStream(fullPath, FileMode.Open);
        result.Content = new StreamContent(stream);
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        return result;
    }

}

我提出了以下AngularJS脚本:

$scope.download = function(fileName) {
    window.requestFileSystem(window.TEMPORARY, 1024*1024*500, function(fileSystem) {
        fileSystem.root.getDirectory("TempDir", {create: true}, function(dirEntry) {
            dirEntry.getFile(fileName, {create: true, exclusive: false}, function(fileEntry) {
                $http.post("/file", JSON.stringify(fileName), {
                    headers: {Accept: "application/octet-stream"}
                }).success(function(res) {
                    fileEntry.createWriter(function(fileEntryContent) {
                        var blob = new Blob([res], {type: "application/pdf"});
                        fileEntryContent.write(blob);
                        //Now load file
                        $scope.load(fileName);
                    });
                }).error(function(err) {
                    console.warn(err);
                });
            }, function(err) {
                console.warn("getFile failed:", err);
            });
        }, function(err) {
            console.warn("getDirectory failed:", err);
        });
    }, function(err) {
        console.warn("requestFileSystem failed:", err);
    });
};

$scope.download("foo.pdf");

$scope.load = function(fileName) {
    window.requestFileSystem(window.TEMPORARY, 1024*1024*500, function(fileSystem) {
        fileSystem.root.getDirectory("TempDir", {create: false}, function(dirEntry) {
            dirEntry.getFile(fileName, {create: false, exclusive: false}, function(fileEntry) {
                //This is where the magic needs to happen!
            }, function(err) {
                console.warn("getFile failed:", err);
            });
        }, function(err) {
            console.warn("getDirectory failed:", err);
        });
    }, function(err) {
        console.warn("requestFileSystem failed:", err);
    });
};

我目前在加载阶段踩了一脚:尝试window.open文件的base64编码内容http.get fileEntry.toURL()但似乎没有任何效果。我检查了Cordova's File Opener 2 plugin,但它似乎只能打开存储在设备的SD卡上的文件等。欢迎任何线索!欢呼声。

1 个答案:

答案 0 :(得分:3)

FileOpener2插件几乎是你认为的唯一选择 - 它可以在这种情况下工作。您需要确保该文件已保存在设备上的应用容器之外,因为其他应用无法访问此文件。您可以在plugin page上找到每个平台的文件结构以及/不公开的内容。您还需要根据平台保存到不同的位置。这对我有用: -

if (ionic.Platform.isIOS()) storagePath = cordova.file.cacheDirectory + "/temp";
else if(ionic.Platform.isAndroid()) storagePath = cordova.file.externalRootDirectory + "/yourapp/temp";

然后,您可以在下载时使用storagePath作为targetPath的基础。我强烈建议使用ngCordova。下面的示例部分基于我在iOS和Android上成功使用的东西,但我还没有测试过它

// add your options here, i.e. any headers you need to add to the request
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, true).then(function(result) {
    //On successful transfer try and extract the file object
    result.file(function (file) {
        var localFile = file.localURL;
        resolveLocalFileSystemURL(localFile, function (entry) {
            var nativePath = entry.toURL();
            // Open in another app, will fail if app doesn't exist that can open the mime type
            $cordovaFileOpener2.open(nativePath, mime).then(function () {
               // Success!
            }, function (err) {
               // Error!
            });
        }, function(error) {
            //handle error here
        });   
    }, function (error) {
        // handle error here 
    });        
}, function (err) {
    //handle error here
});