有什么方法可以在客户端创建一个文本文件，并提示用户下载它，而不与服务器进行任何交互? 我知道我不能直接写到他们的机器上(安全等)，但是我可以创建并提示他们保存它吗?
当前回答
HTML5浏览器的简单解决方案…
function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } form * { display: block; margin: 10px; } <form onsubmit="download(this['name'].value, this['text'].value)"> <input type="text" name="name" value="test.txt"> <textarea name="text"></textarea> <input type="submit" value="Download"> </form>
使用
download('test.txt', 'Hello world!');
其他回答
如果文件包含文本数据，我使用的一种技术是将文本放入textarea元素中，并让用户选择它(在textarea中单击，然后按ctrl-A)，然后复制，然后粘贴到文本编辑器。
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
download("hello.txt","This is the content of my file :)");
原文:https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
来自github.com/kennethjiang/js-file-download的js-file-download包处理浏览器支持的边缘情况:
查看源代码以查看它如何使用本页中提到的技术。
安装
yarn add js-file-download
npm install --save js-file-download
使用
import fileDownload from 'js-file-download'
// fileDownload(data, filename, mime)
// mime is optional
fileDownload(data, 'filename.csv', 'text/csv')
一个例子，IE 10+， Firefox和Chrome(没有jQuery或任何其他库):
function save(filename, data) {
const blob = new Blob([data], {type: 'text/csv'});
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
const elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
}
注意，根据您的情况，您可能还想调用URL。删除elem后，revokeObjectURL。根据URL.createObjectURL的文档:
每次调用createObjectURL()时，都会创建一个新的对象URL，即使您已经为同一个对象创建了一个URL。当你不再需要它们时，必须调用URL.revokeObjectURL()来释放它们。当文档被卸载时，浏览器会自动释放这些;但是，为了优化性能和内存使用，如果存在可以显式卸载它们的安全时间，则应该这样做。
根据@Rick的回答，这真的很有帮助。
如果你想以这种方式共享字符串数据，你必须转义字符串数据:
$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));
｀ 抱歉，我不能评论@Rick的回答，因为我目前在StackOverflow的声誉很低。
分享了一个编辑建议，但被拒绝了。
