JavaScript 如何保存到本地文件？
Posted
技术标签:
【中文标题】JavaScript 如何保存到本地文件？【英文标题】：How can JavaScript save to a local file? 【发布时间】：2012-06-19 18:02:00 【问题描述】：已经有在线写入文件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>
【问题讨论】：
【参考方案1】：在 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);
);
*/
【讨论】：
【参考方案2】：基于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/
【讨论】：
这是我的首选答案。【参考方案3】：所以，您的真正问题是：“JavaScript 如何保存到本地文件？”
看看http://www.tiddlywiki.com/
在您在内部“更改”后，他们将其 HTML 页面保存在本地。
[2016.01.31 更新]
TiddlyWiki 原版直接保存。它非常好，并保存到一个可配置的备份目录中，并将时间戳作为备份文件名的一部分。
TiddlyWiki 当前版本只是将它作为任何文件下载进行下载。您需要自己进行备份管理。 :(
[更新结束
诀窍是，您必须以 file:// 而不是 http:// 打开页面才能在本地保存。
您浏览器的安全性不会让您保存到_someone_else_的本地系统，只能保存到您自己的系统，即使这样也不是小事。
-杰西
【讨论】：
现在我在学习 Tiddlywiki 但是除了数据之外还有其他类型的转换：application/x-json;base64? tiddlywiki 使用 java 小程序访问本地文件系统，而不是 javascript。 TiddlyWiki 为 Safari 和 Opera 使用 Java 小程序。对于 IE，它使用 ActiveX，对于 Firefox/Camino，它使用纯 javascript（通过 privilegeManager）或 firefox 扩展（因为 privilegeManager 在 v15 中被删除）。 这个 jQuery 插件是从 TiddlyWiki 中提取的，它的工作原理是 @dwurf 解释的。 jquery.tiddlywiki.org/twFile.html【参考方案4】：在不涉及本地客户端（浏览器机器）的情况下，不可能在本地保存文件，因为我可能对客户端机器构成很大威胁。您可以使用链接下载该文件。如果你想在本地机器上存储 Json 数据之类的东西可以使用浏览器提供的 LocalStorage，Web Storage
【讨论】：
谢谢，它可能提供了错误的信息，但我以前不知道这一点，并且曾经从中寻求帮助。请告诉我我在答案中给出的特定链接有什么问题。 谢谢！！！现在我在研究Web存储但是除了数据还有其他类型的转换：application/x-json;base64? Uao ROdneyrehm 我不知道这个网站 wfools.com【参考方案5】：如果您使用的是 FireFox，则可以使用 File HandleAPI
https://developer.mozilla.org/en-US/docs/Web/API/File_Handle_API
我刚刚测试了它，它可以工作！
【讨论】：
【参考方案6】：虽然最鄙视 Flash，但它是在您的 html/javascript 环境中提供“保存”和“另存为”功能的可行选择。
我创建了一个名为“OpenSave”的小部件，可在此处提供此功能：
http://www.gieson.com/Library/projects/utilities/opensave/
-麦克
【讨论】：
是否可以使用这个保存头部和身体标签中的所有内容？【参考方案7】：您应该检查download 属性和window.URL 方法，因为download 属性似乎不喜欢数据URI。
这个example by Google 几乎就是你想要做的。
【讨论】：
+1 我过去尝试过数据 uri 模式，它可以工作，但它决定了如何命名你最终得到的文件，所以它几乎没用。我在 Mac 上的 Firefox、Safari、Opera 和 Chrome 中试过这个，Safari 和 Opera 没有“BlobBuilder”所以关于“只有 Chrome 开发通道（14.0.835.15+）支持这个属性”的免责声明部分正确。目前在 FireFox 上运行，在 Safari 和 Opera 上运行失败。 Blob Builder 据说也在 MSIE 中工作...ie.microsoft.com/testdrive/HTML5/BlobBuilder 链接已损坏。【参考方案8】：这完全取决于您要通过“本地保存”实现的目标。您要允许用户下载文件吗？然后<a download> 是要走的路。您想将其保存在本地，以便恢复您的应用程序状态吗？然后您可能想查看WebStorage 的各种选项。特别是localStorage 或IndexedDB。 FilesystemAPI 允许您创建可以存储任意数据的本地虚拟文件系统。
【讨论】：
thx 但是除了data还有其他类型的转换：application/x-json;base64? 除了应该是application/json 之外 - 不，我看不出还有什么意义。
带IndexedDB如何下载到本地？
IndexedDB 并不是一个可下载的文件。它是您浏览器中的一个数据库。这不是你要找的。span>
以上是关于JavaScript 如何保存到本地文件？的主要内容，如果未能解决你的问题，请参考以下文章
保存 CSS - 浏览时，如何将 chrome dev 或 firebug 内部的 css 文件保存到本地目录 [重复]