Question

我知道我可能会使用Cordova File plugin，但由于它的低级特性，它似乎有多个特定于平台的怪癖（例如不同的目录结构）。

今天我发现this answer显示了如何打开桌面浏览器的保存对话框，供用户选择保存blob数据的位置，但它是dart代码所以我转换了纯粹JavaScript的想法：

function onSaveButtonClick() {
    var blob = new Blob(['abcd'], {type: 'text/plain'}),
        blobUrl = window.URL.createObjectURL(blob),
        a = document.createElement('a');

    document.getElementsByTagName('body')[0].appendChild(a);
    a.href = blobUrl;
    a.download = "file.name";
    a.click();
    a.innerHTML = blobUrl;
    window.setTimeout(function() {
        window.URL.revokeObjectURL(blobUrl);
    }, 1000);
}

CodePen here

（另请注意download的{{1}}属性为not supported by IE, but Edge，除此之外，IE似乎阻止了<a>来电。）

在上面的代码中，设置a.click()仅用于调试目的和生产用途，您可能需要设置innerHTML以完全隐藏锚点。我也知道，超时中的a.style.display = 'none'调用有点代码味道，但它似乎适用于桌面Chrome和Firefox。

现在的问题是：如何在Cordova应用程序中实现相同功能？我的意思是，让用户通过库存另存为对话框选择文件保存位置，这样我就不必在我的应用中添加特定于平台的代码了吗？在Android上的Cordova应用程序中运行此代码只会显示锚点，但不会要求用户保存文件 - 即使单击链接（超时之前或之后）也不会手动显示该文件。

更新

这里有一个相关的问题：

How to make Phonegap's (Cordova) File API work like File API in normal browser

唯一的答案要求用户安装一个单独的（虽然是免费的）应用程序，因此我不喜欢我的应用程序是自包含的。

Answer 1

   // Lets save a sample json data....

   function SaveData(fileName, Data) {
       window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
    fileSystem.root.getFile(fileName, {
        create: true,
        exclusive: false
    }, function(fileEntry) {
        fileEntry.createWriter(function(writer) {
            writer.onwriteend = function() {
                alert("Data Saved");
            };
            writer.write(JSON.stringify(Data)); // if data type is not json use writer.write(Data);
        }, onError);
    }, onError);
}, onError);
   }

   function onError() {
alert("Error");
   }

   // function to create a directory if necessary
   function CreateDirectory(DirName) {
       window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function gotFS(fileSystem) {
    fileSystem.root.getDirectory(DirName, {
        create: true
    }, function gotDir(dirEntry) {});
}, function fail() {});
   }


   // Create Directory
   CreateDirectory("My Folder");

   var fileName = 'SavedFile.json'; // or file name and path e.g My Folder/SavedFile.json

   // json data
   var Data = '{ "id": "5001", "type": "None" },{ "id": "5002", "type": "Glazed" },{ "id": "5005", "type": "Sugar" }';

   // Save Data
   SaveData(fileName, Data);

Answer 2

使用Cordova文件传输插件下载文件https://github.com/apache/cordova-plugin-file-transfer

  function downloadFILE(filename, url){
   var ft = new FileTransfer();
var uri = encodeURI(url);

// /Documents/ folder in the users sdcard or phone storage if sdcard is not available
var downloadPath = fileSystem.root.fullPath + "/Documents/"+filename;

ft.onprogress = function(progressEvent) {
    if (progressEvent.lengthComputable) {
        var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
    document.getElementById('myId').innerHTML = perc;
    } else {
        if($('#status').text() == "") {
    document.getElementById('myId').innerHTML = "Loading....";
        } else {
    document.getElementById('myId').innerHTML = ".";
        }
    }
};

ft.download(uri, downloadPath, 
function(entry) {
    document.getElementById('myId').innerHTML = "Download Complete! File Saved To" +entry.fullPath;
}, 
function(error) {
    alert('Crap something went wrong...');  
});
     }

使用

进行通话

 downloadFILE('npm-logo.svg', 'https://www.npmjs.com/static/images/npm-logo.svg');

Answer 3

移动操作系统通常用于隐藏用户的文件系统。下载的文件适用于OS / App特定的＆＃34;下载＆＃34;没有用户可以选择的文件夹。操作系统大多数都没有内置的文件浏览器来随机选择/选择要打开的文件。然而，Downloads-folder通常以某种方式可达（例如使用下载快捷方式），因此这些文件可以由用户打开。我知道这不是一个解决方案，但可能会说明为什么可能没有满足您所有需求的问题的真正解决方案。

在Cordova / PhoneGap中的客户端文件中打开/保存客户端数据

更新

3 个答案: