Mir*_*ani 12 javascript jquery json jsonp
已经有一个在线编写文件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>
Sta*_*lav 13
基于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();
修改原fiddle：http : //jsfiddle.net/9av2mfjx/
在 Javascript 中创建和保存文件的可能方法有：
\n使用名为 FileSaver 的库
\nsaveAs(new File(["CONTENT"], "demo.txt", {type: "text/plain;charset=utf-8"}));\n创建一个 blob 对象并提供 \xe2\x80\x9c，另存为\xe2\x80\x9d。
\nvar a = document.createElement("a");\na.href = window.URL.createObjectURL(new Blob(["CONTENT"], {type: "text/plain"}));\na.download = "demo.txt";\na.click();\n上传数据，保存在服务器上。
\nvar data = new FormData();\ndata.append("upfile", new Blob(["CONTENT"], {type: "text/plain"}));\nfetch("SERVER.SCRIPT", { method: "POST", body: data });\n创建可写文件流。
\nconst fileHandle = await window.showSaveFilePicker();\nconst fileStream = await fileHandle.createWritable();\nawait fileStream.write(new Blob(["CONTENT"], {type: "text/plain"}));\nawait fileStream.close();\n在NodeJS中，只需使用文件系统模块
\n require("fs").writeFile("demo.txt", "Foo bar!");\n<!-- (A) LOAD FILE SAVER -->\n<!-- https://cdnjs.com/libraries/FileSaver.js -->\n<!-- https://github.com/eligrey/FileSaver.js -->\n<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>\n \n<script>\n// (B) "SAVE AS"\nvar myFile = new File(["CONTENT"], "demo.txt", {type: "text/plain;charset=utf-8"});\nsaveAs(myFile);\n</script>\n// (A) CREATE BLOB OBJECT\nvar myBlob = new Blob(["CONTENT"], {type: "text/plain"});\n\n// (B) CREATE DOWNLOAD LINK\nvar url = window.URL.createObjectURL(myBlob);\nvar anchor = document.createElement("a");\nanchor.href = url;\nanchor.download = "demo.txt";\n \n// (C) "FORCE DOWNLOAD"\n// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY\n// BETTER TO LET USERS CLICK ON THEIR OWN\nanchor.click();\nwindow.URL.revokeObjectURL(url);\ndocument.removeChild(anchor);\n <script>\n function blobajax () {\n // (A) CREATE BLOB OBJECT\n var myBlob = new Blob(["CONTENT"], {type: "text/plain"});\n \n // (B) FORM DATA\n var data = new FormData();\n data.append("upfile", myBlob);\n \n // (C) AJAX UPLOAD TO SERVER\n fetch("3b-upload.php", {\n method: "POST",\n body: data\n })\n .then((res) => { return res.text(); })\n .then((txt) => { console.log(txt); });\n }\n </script>\n <input type="button" value="Go" onclick="blobajax()"/>\n <script>\n async function saveFile() {\n // (A) CREATE BLOB OBJECT\n var myBlob = new Blob(["CONTENT"], {type: "text/plain"});\n \n // (B) FILE HANDLER & FILE STREAM\n const fileHandle = await window.showSaveFilePicker({\n types: [{\n description: "Text file",\n accept: {"text/plain": [".txt"]}\n }]\n });\n const fileStream = await fileHandle.createWritable();\n \n // (C) WRITE FILE\n await fileStream.write(myBlob);\n await fileStream.close();\n }\n </script>\n \n <input type="button" value="Save File" onclick="saveFile()"/>\n// (A) LOAD FILE SYSTEM MODULE\n// https://nodejs.org/api/fs.html\nconst fs = require("fs");\n\n// (B) WRITE TO FILE\nfs.writeFile("demo.txt", "CONTENT", "utf8", (error, data) => {\n console.log("Write complete");\n console.log(error);\n console.log(data);\n});\n\n/* (C) READ FROM FILE\nfs.readFile("demo.txt", "utf8", (error, data) => {\n console.log("Read complete");\n console.log(error);\n console.log(data);\n});\n*/\n| 归档时间： |
|
| 查看次数： |
92837 次 |
| 最近记录： |