如何使用 JavaScript 写入文件(用户目录)?

IT技术 javascript jquery html
2021-01-19 16:08:21

我想使用html5和javascript或jquery从chrome(所有版本)写入任何文件的txt。

我试过 FileSystem API,我试过的代码是:

函数 onFs(fs) {
 console.log('test');
  fs.root.getFile('log.txt', {create: true, exclusive: true},
      功能(文件条目){
        // fileEntry.isFile === true
        // fileEntry.name == 'log.txt'
        // fileEntry.fullPath == '/log.txt'

        fileEntry.getMetaData(function(md) {
          console.log(md.modificationTime.toDateString());
        }, onError);

      },
      出错时
  );
}

window.webkitRequestFileSystem(TEMPORARY, 1024*1024 /*1MB*/, onFs);

但不工作。

有没有办法写入文件?

1个回答

我想在用户目录中写入文件

您不能直接将文件写入用户文件系统。

在搜索类似的问题以准确解决问题之后,是否能够$ cat按照@Iain发布的这个答案在 plnkr 上创建的文件的内容,在 PERSISTENT 文件系统存储哪里存储与 chrome?. 该文件已写入~/.config/[chrome, chromium]目录中的用户文件系统

使用文件管理器导航到

  ~/.config/[chrome, chromium]/Default/File System

查看目录;包含以下文字的文件是在一个文件夹中找到的,文件夹名称为两位数字,然后在另外两个子目录中;具有单个小写字母作为文件夹名称的子目录;在这个子目录中有另一个子目录,有两位数字作为文件夹名称;写入的文件window.webkitRequestFileSystem有八位数字作为文件名,没有扩展名,但具有正确的"text/plain"MIME 类型;设置在Blob type属性。

然后在 terminal

  $ cd ~/.config/[chrome, chromium]/Default/File\ System/[three digits]/[lowercase letter]/[two digits]

  $ cat [eight digits]
  Lorem Ipsum

还没有尝试创建.sh文件并执行它。可能需要将目录放入path或将文件移动到现有文件夹中path设置适合permissions文件。可能会在 chrome/chrome 浏览器设置中进行调整,但也没有尝试过。

您可能会编写一个命令来将文件复制或移动/path/to/file到 中的文件夹path,然后执行该文件;或其他方法。


您可以使用元素的download属性a来允许下载由createWriter用户文件系统创建的文件。

文件系统被沙箱化

由于文件系统是沙盒化的,因此 Web 应用程序无法访问另一个应用程序的文件。您也无法在用户硬盘驱动器上的任意文件夹(例如,我的图片和我的文档)中读取或写入文件。

另见定义

持久存储持久存储是保留在浏览器中的存储,除非用户将其清除或应用程序将其删除。
临时存储任何 Web 应用程序都可以使用临时存储它是自动的,不需要请求,但浏览器可以在没有警告的情况下删除存储。


我想在用户目录中写入文件,因为它必须是用户可以理解的。

编辑、更新

您可以使用上述方法。也就是说,使用文件管理器查看文件夹和文件在

  ~/.config/[chrome, chromium]/Default/File System

  ## do stuff with contents of file written by `window.requestFilesystem`

要查看 chrome/chrome 中的文件,FileSystem您可以导航到DevTools-> Experiments-> check FileSystem inspectionlog.txt应在Resources选项卡中列出FileSystem

也可以使用 URL 在地址栏导航到文件

filesystem:http://run.plnkr.co/temporary/log.txt

应该有内容

Lorem Ipsum

或者

filesystem:http://run.plnkr.co/temporary/

查看临时文件系统根目录下的所有文件和目录

请参阅探索文件系统 API

首先启动带有--allow-file-access-from-files标志的铬/铬,请参阅如何使 Google Chrome 标志“--allow-file-access-from-files”永久化?.

下一个

window.requestFileSystem  = window.requestFileSystem 
                            || window.webkitRequestFileSystem;

添加错误处理

function errorHandler(e) {
  var msg = '';

  switch (e.message) {
    case FileError.QUOTA_EXCEEDED_ERR:
      msg = 'QUOTA_EXCEEDED_ERR';
      break;
    case FileError.NOT_FOUND_ERR:
      msg = 'NOT_FOUND_ERR';
      break;
    case FileError.SECURITY_ERR:
      msg = 'SECURITY_ERR';
      break;
    case FileError.INVALID_MODIFICATION_ERR:
      msg = 'INVALID_MODIFICATION_ERR';
      break;
    case FileError.INVALID_STATE_ERR:
      msg = 'INVALID_STATE_ERR';
      break;
    default:
      msg = 'Unknown Error';
      break;
  };

  console.log('Error: ' + msg);
}

然后你应该能够

function writeFile(fs) {

  fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function(fileWriter) {

      fileWriter.onwriteend = function(e) {
        console.log('Write completed.');
        // call `readFile` here
        window.requestFileSystem(window.TEMPORARY, 1024*1024, readFile, errorHandler);

      };

      fileWriter.onerror = function(e) {
        console.log('Write failed: ' + e.toString());
      };

      // Create a new Blob and write it to log.txt.
      var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});

      fileWriter.write(blob);

    }, errorHandler);

  }, errorHandler);

}

window.requestFileSystem(window.TEMPORARY, 1024*1024, writeFile, errorHandler);

function readFile(fs) {

  fs.root.getFile('log.txt', {}, function(fileEntry) {

    // Get a File object representing the file,
    // then use FileReader to read its contents.
    fileEntry.file(function(file) {
       var reader = new FileReader();

       reader.onloadend = function(e) {
         console.log(e.target.result)
       };

       reader.readAsText(file);
    }, errorHandler);

  }, errorHandler);

}

plnkr http://plnkr.co/edit/EVVNYYUvHiM545T06kMC?p=preview


请注意,在 Chrome 38+ 中,还可以File使用new File()构造函数创建对象请参阅Chrome:使用 Javascript 从 blob 创建文件输入?.

不,它是后台进程,将数据保存到文件夹中存在的文件中。

这种方法也不会自动将创建的文件写入用户文件系统中的现有文件夹。

无论采用哪种方法,都应该需要用户操作才能将文件保存到用户文件系统。这可以使用element 处的download属性来实现adata URI How to export JavaScript array info to csv (on client side)?,或使用 Javascript/jQuery 下载文件iframe元素 这应该提示用户选择保存文件或不保存文件。


另请参见该FileSaver接口FileSaver.js

我试过版本 39,45,48 和 laumch 命令是 /usr/bin/google-chrome --allow-access-from-files plnkr.co/edit/ETlOjuSsONXqFaWzS6K9?p=info
2021-03-20 16:08:21
@BhumiShah 启动标志应该是 --allow-file-access-from-files
2021-03-21 16:08:21
此代码控制台记录“未知错误”并且未生成文件。我已使用 file://folder/test.html 运行此代码。这个对吗?
2021-03-30 16:08:21
@BhumiShah 能够在 chrome 42file:协议中返回预期结果并--allow-file-access-from-files设置标志并localStorage启用
2021-03-30 16:08:21
@BhumiShah “我试过,但遇到同样的错误。” 哪个版本的铬?您可以在问题中包含 chrome 的启动命令吗?你能创建一个 plnkr plnkr.co来演示吗?
2021-03-30 16:08:21