我有要写入文件的数据,并打开一个文件对话框供用户选择保存文件的位置。如果它适用于所有浏览器就好了,但它必须适用于 Chrome。我想在客户端做这一切。
基本上我想知道在这个函数中放什么:
saveFile: function(data)
{
}
该函数接收数据的位置,让用户选择一个位置来保存文件,并在该位置使用该数据创建一个文件。
如果有帮助的话,使用 HTML 也很好。
我有要写入文件的数据,并打开一个文件对话框供用户选择保存文件的位置。如果它适用于所有浏览器就好了,但它必须适用于 Chrome。我想在客户端做这一切。
基本上我想知道在这个函数中放什么:
saveFile: function(data)
{
}
该函数接收数据的位置,让用户选择一个位置来保存文件,并在该位置使用该数据创建一个文件。
如果有帮助的话,使用 HTML 也很好。
Awesomeness01(不需要锚标记)对代码进行了很小的改进,并按照trueimage 的建议进行了添加(支持 IE):
// Function to download data to a file
function download(data, filename, type) {
var file = new Blob([data], {type: type});
if (window.navigator.msSaveOrOpenBlob) // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else { // Others
var a = document.createElement("a"),
url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
}
经测试可在 Chrome、FireFox 和 IE10 中正常工作。
在 Safari 中,数据在新选项卡中打开,必须手动保存此文件。
function download(text, name, type) {
var a = document.getElementById("a");
var file = new Blob([text], {type: type});
a.href = URL.createObjectURL(file);
a.download = name;
}
<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>
然后您将通过将下载属性放在锚标记上来下载文件。
我喜欢这个比创建数据 url 更好的原因是你不必制作一个很大的长 url,你可以只生成一个临时 url。
github 上的这个项目看起来很有前途:
https://github.com/eligrey/FileSaver.js
FileSaver.js 在本机不支持它的浏览器中实现了 W3C saveAs() FileSaver 接口。
也看看这里的演示:
在创建文件之前选择保存文件的位置是不可能的。但是,至少在 Chrome 中,可以仅使用 JavaScript 生成文件。这是我创建 CSV 文件的一个旧示例。将提示用户下载它。不幸的是,这在其他浏览器中不能很好地工作,尤其是 IE。
<!DOCTYPE html>
<html>
<head>
<title>JS CSV</title>
</head>
<body>
<button id="b">export to CSV</button>
<script type="text/javascript">
function exportToCsv() {
var myCsv = "Col1,Col2,Col3\nval1,val2,val3";
window.open('data:text/csv;charset=utf-8,' + escape(myCsv));
}
var button = document.getElementById('b');
button.addEventListener('click', exportToCsv);
</script>
</body>
</html>
function download(text, name, type) {
var a = document.getElementById("a");
var file = new Blob([text], {type: type});
a.href = URL.createObjectURL(file);
a.download = name;
}
<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.json', 'text/json')">Create file</button>
我认为如果您更改 mime 类型,这也可以与 json 文件一起使用。