如何使用Chrome App文件系统API执行文件保存



我正在通过Chrome App教程,并尝试使用文件系统API保存文件。

据我了解说明,我应该能够打开并读取文件,然后使用同一文件列表创建一个可写的fileentry对象并替换文件内容。

我能够选择和读取文件内容,并且覆盖物似乎几乎是工作。控制台输出使我相信文件是编写的,但内容实际上并没有改变。这是我的代码和输出;

subtest.json ;

{
  "manifest_version": 2,
  "name": "angular toots",
  "version": "1",
  "icons": { "128": "icon_128.png" },
  "app": { "background": { "scripts": ["background.js"] } },
  "permissions": [{"fileSystem": ["write", "retainEntries", "directory"]}], 
  "minimum_chrome_version": "28"
}

index.html ;

<body ng-app="myApp" ng-controller="appCtrl" >
    <div>
        <form name="fileForm">
            <button ng-click="onLoad()">Load</button>
            <button ng-click="onSave()">Save</button>
        </form>
    </div>
</body>

app.js ;

var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope) {
    $scope.chosenFileEntry = null;
    $scope.onLoad = function(e) {
        chrome.fileSystem.chooseEntry({type: 'openFile'}, function(fileEntry) {
            $scope.chosenFileEntry = fileEntry;
            console.log($scope.chosenFileEntry);
            fileEntry.file(function(file) {
                var reader = new FileReader();
                reader.onerror = function(e){console.log('error 1');};
                reader.onloadend = function(loadEvent) {
                    console.log(loadEvent.target.result);
                };
                reader.readAsText(file);
            }, function(e){console.log('error 2');});
        });
    };
    $scope.onSave = function(e){
        console.log('onSave');
        console.log($scope.chosenFileEntry);
        chrome.fileSystem.getWritableEntry($scope.chosenFileEntry, function(writableFileEntry) {
            writableFileEntry.createWriter(function(writer) {
                writer.onerror = function(e){console.log('error 1');};
                writer.onwriteend = function(e){console.log('written');};
                console.log('writing');
                $scope.chosenFileEntry.file(function(file) {
                    writer.write(file);
                });
            }, function(e){console.log('error 2');});
        });
    };
});

C: USER Rooster Rooster desktop foo.txt

Some Text

单击加载时,保存,我将其放入控制台;

> FileEntry {isFile: true, isDirectory: false, name: "foo.txt", fullPath: "/foo.txt", filesystem: DOMFileSystem}
Some Text
onSave
> FileEntry {isFile: true, isDirectory: false, name: "foo.txt", fullPath: "/foo.txt", filesystem: DOMFileSystem}
writing
written

但是,目标文件的内容不变。

我确实注意到fileentry fullPath 属性并不是文件的完整路径。尝试修改该属性似乎没有任何效果,即无法更改。

我缺少什么?

您需要使用chrome.fileSystem API。您需要至少询问用户一次保存文件,但是您可以保留条目以再次写入同一文件/文件夹。

使用chrome.fileSystem.chooseEntry({'type': "openDirectory"})提出提示,要求用户选择一个目录,但是我找不到保存到该目录的方法。

声明fileSystem API的权限:

"permissions": [
{"fileSystem": ["write", "retainEntries", "directory"]}
]

然后,通过使用HTML文件系统API,您可以在目录中创建文件:

dirEntry.getFile(
"test.txt",
{create: true}, // add "exclusive: true" to prevent overwrite
function(fileEntry) { /* write here */ },
function(e) { console.error(e) }
);

最新更新