JavaScript 如何保存到本地文件？

Question

已經有在線寫入文件 JSON 的解決方案，但我想在本地保存 json 文件。 我嘗試使用這個例子http://jsfiddle.net/RZBbY/10/它創建一個鏈接來下載文件，使用這個調用a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show(); 有沒有辦法在本地保存文件而不是提供可下載的鏈接？ 除了data:application/x-json;base64之外還有其他類型的轉換嗎？

這是我的代碼：

<!DOCTYPE html>
<head> 
    <meta charset="utf-8">
    <title>jQuery UI Sortable - Default functionality</title>

    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
    <script src="http://jqueryui.com//jquery-1.7.2.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.sortable.js"></script>
        <script src="http://jqueryui.com/ui/jquery.ui.accordion.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">        
    <meta charset="utf-8">
    <style>a { font: 12px Arial; color: #ac9095; }</style>
<script type='text/javascript'>
$(document).ready(function() {
var f = $('form'), a = $('a'),
    i = $('input'), t = $('textarea');
       
$('#salva').click(function() {
    var o = {}, v = t.val();
    
    a.hide();//nasconde il contenuto
    i.each(function() { 
    o[this.name] = $(this).val(); });
    if (v === '') {
        t.val("[\n " + JSON.stringify(o) + " \n]")         
    }
    else {
        t.val(v.substr(0, v.length - 3));
        t.val(t.val() + ",\n " + JSON.stringify(o) +  " \n]")  
    }
});
});

$('#esporta').bind('click', function() {
    a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show();
        
});
</script>
</head>
<body>
    <form>
        <label>Nome</label> <input type="text" name="nome"><br />
        <label>Cognome</label> <input type="text" name="cognome">
        <button type="button" id="salva">Salva</button>
    </form>        

    <textarea rows="10" cols="60"></textarea><br />
    <button type="button" id="esporta">Esporta dati</button>
    <a href="" style="display: none">Scarica Dati</a>
</body>
</html>

Answer 1

您應該檢查download屬性和window.URL方法，因為download屬性似乎不喜歡數據URI。 Google的這個示例幾乎就是您想要做的。

Answer 2

在不涉及本地客戶端（瀏覽器計算機）的情況下，無法在本地保存文件，因為這可能會對客戶端計算機造成巨大威脅。 您可以使用鏈接下載該文件。 如果要在本地計算機上存儲諸如Json數據之類的內容，則可以使用瀏覽器提供的LocalStorage ， Web Storage

Answer 3

這完全取決於您要通過“本地保存”來實現的目標。 是否要允許用戶下載文件？ 那么<a download>是解決之道。 是否要在本地保存它，以便可以恢復應用程序狀態？ 然后，您可能需要研究WebStorage的各種選項。 特別是localStorage或IndexedDB 。 FilesystemAPI允許您創建可以存儲任意數據的本地虛擬文件系統。

Answer 4

盡管大多數人鄙視Flash，但它是在html / javascript環境中提供“保存”和“另存為”功能的可行選擇。

我創建了一個名為“ OpenSave”的小部件，可在此處提供此功能：

http://www.gieson.com/Library/projects/utilities/opensave/

-麥克風

Answer 5

因此，您真正的問題是：“如何將JavaScript保存到本地文件？”

看看http://www.tiddlywiki.com/

在內部進行“更改”后，他們會將HTML頁面保存在本地。

[更新2016.01.31]

TiddlyWiki的原始版本直接保存。 這非常不錯，並以時間戳記作為備份文件名的一部分保存到可配置的備份目錄中。

TiddlyWiki當前版本只是將其下載為任何文件。 您需要執行自己的備份管理。 :(

[更新結束

訣竅是，您必須以file：//而不是以http：//的形式打開頁面才能保存在本地。

瀏覽器上的安全性不會讓您保存到_someone_else的_本地系統中，而只能保存到自己的本地系統中，即使如此，它也不是一件容易的事。

-傑西

Answer 6

基於http://html5-demos.appspot.com/static/a.download.html ：

var fileContent = "My epic novel that I don't want to lose.";
var bb = new Blob([fileContent ], { type: 'text/plain' });
var a = document.createElement('a');
a.download = 'download.txt';
a.href = window.URL.createObjectURL(bb);
a.click();

修改了原始小提琴： http : //jsfiddle.net/9av2mfjx/

Answer 7

如果您使用的是FireFox，則可以使用File HandleAPI

https://developer.mozilla.org/zh-CN/docs/Web/API/File_Handle_API

我剛剛對其進行了測試，並且可以正常工作！

Answer 8

在 Javascript 中創建和保存文件的可能方法是：

使用名為 FileSaver 的庫

saveAs(new File(["CONTENT"], "demo.txt", {type: "text/plain;charset=utf-8"}));

創建一個 blob 對象並提供“另存為”。

var a = document.createElement("a");
a.href = window.URL.createObjectURL(new Blob(["CONTENT"], {type: "text/plain"}));
a.download = "demo.txt";
a.click();

上傳數據，保存在服務器上。

var data = new FormData();
data.append("upfile", new Blob(["CONTENT"], {type: "text/plain"}));
fetch("SERVER.SCRIPT", { method: "POST", body: data });

創建可寫文件流。

const fileHandle = await window.showSaveFilePicker();
const fileStream = await fileHandle.createWritable();
await fileStream.write(new Blob(["CONTENT"], {type: "text/plain"}));
await fileStream.close();

在 NodeJS 中，只需使用文件系統模塊

 require("fs").writeFile("demo.txt", "Foo bar!");

<!-- (A) LOAD FILE SAVER -->
<!-- https://cdnjs.com/libraries/FileSaver.js -->
<!-- https://github.com/eligrey/FileSaver.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
 
<script>
// (B) "SAVE AS"
var myFile = new File(["CONTENT"], "demo.txt", {type: "text/plain;charset=utf-8"});
saveAs(myFile);
</script>

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

    <script>
    function blobajax () {
      // (A) CREATE BLOB OBJECT
      var myBlob = new Blob(["CONTENT"], {type: "text/plain"});
    
      // (B) FORM DATA
      var data = new FormData();
      data.append("upfile", myBlob);
    
      // (C) AJAX UPLOAD TO SERVER
      fetch("3b-upload.php", {
        method: "POST",
        body: data
      })
      .then((res) => { return res.text(); })
      .then((txt) => { console.log(txt); });
    }
    </script>
    <input type="button" value="Go" onclick="blobajax()"/>

    <script>
    async function saveFile() {
      // (A) CREATE BLOB OBJECT
      var myBlob = new Blob(["CONTENT"], {type: "text/plain"});
     
      // (B) FILE HANDLER & FILE STREAM
      const fileHandle = await window.showSaveFilePicker({
        types: [{
          description: "Text file",
          accept: {"text/plain": [".txt"]}
        }]
      });
      const fileStream = await fileHandle.createWritable();
     
      // (C) WRITE FILE
      await fileStream.write(myBlob);
      await fileStream.close();
    }
    </script>
    
    <input type="button" value="Save File" onclick="saveFile()"/>

// (A) LOAD FILE SYSTEM MODULE
// https://nodejs.org/api/fs.html
const fs = require("fs");

// (B) WRITE TO FILE
fs.writeFile("demo.txt", "CONTENT", "utf8", (error, data) => {
  console.log("Write complete");
  console.log(error);
  console.log(data);
});

/* (C) READ FROM FILE
fs.readFile("demo.txt", "utf8", (error, data) => {
  console.log("Read complete");
  console.log(error);
  console.log(data);
});
*/

JavaScript 如何保存到本地文件？

問題描述

8 個解決方案

解決方案1
13 2012-06-17 13:24:28

解決方案2
9 2012-06-17 13:07:01

解決方案3
3 2012-06-17 13:15:38

解決方案4
2 2013-03-05 20:52:13

解決方案5
1 2012-06-17 13:10:36

解決方案6
1 2019-06-16 06:52:27

解決方案7
0 2014-11-18 00:46:43

解決方案8
0 2021-12-09 13:15:15

JavaScript 如何保存到本地文件？

問題描述

8 個解決方案

解決方案1 13 2012-06-17 13:24:28

解決方案2 9 2012-06-17 13:07:01

解決方案3 3 2012-06-17 13:15:38

解決方案4 2 2013-03-05 20:52:13

解決方案5 1 2012-06-17 13:10:36

解決方案6 1 2019-06-16 06:52:27

解決方案7 0 2014-11-18 00:46:43

解決方案8 0 2021-12-09 13:15:15

解決方案1
13 2012-06-17 13:24:28

解決方案2
9 2012-06-17 13:07:01

解決方案3
3 2012-06-17 13:15:38

解決方案4
2 2013-03-05 20:52:13

解決方案5
1 2012-06-17 13:10:36

解決方案6
1 2019-06-16 06:52:27

解決方案7
0 2014-11-18 00:46:43

解決方案8
0 2021-12-09 13:15:15