前端本地将内容写入文件并保存的艺术

2023-10-04 21:47:19

本地文件写入的方式

HTML5 File API

HTML5 File API 提供了多种用于处理文件的方法，其中包括将文件内容写入本地文件系统。以下是一个使用 HTML5 File API 将文本数据写入本地文件的示例：

<script>
  function saveTextFile() {
    const text = 'Hello, world!';
    const blob = new Blob([text], {type: 'text/plain'});

    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'my-text-file.txt';

    link.click();
  }
</script>

JavaScript File System API

JavaScript File System API 允许 JavaScript 代码与本地文件系统进行交互，包括写入和读取文件。以下是一个使用 JavaScript File System API 将文本数据写入本地文件的示例：

<script>
  function saveTextFile() {
    const text = 'Hello, world!';

    window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {
      fs.root.getFile('my-text-file.txt', {create: true}, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
          fileWriter.write(new Blob([text], {type: 'text/plain'}));
        });
      });
    });
  }
</script>