有什么方法可以在客户端创建一个文本文件，并提示用户下载它，而不与服务器进行任何交互? 我知道我不能直接写到他们的机器上(安全等)，但是我可以创建并提示他们保存它吗?
当前回答
一个例子，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()来释放它们。当文档被卸载时，浏览器会自动释放这些;但是，为了优化性能和内存使用，如果存在可以显式卸载它们的安全时间，则应该这样做。
其他回答
来自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')
下面这个函数是有效的。
private createDownloadableCsvFile(fileName, content) {
let link = document.createElement("a");
link.download = fileName;
link.href = `data:application/octet-stream,${content}`;
return link;
}
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!');
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
我很高兴使用FileSaver.js。它的兼容性非常好(IE10+和其他版本)，而且使用起来非常简单:
var blob = new Blob(["some text"], {
type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");
