有什么办法可以在客户端创建一个文本文件并提示用户下载它，而无需与服务器进行任何交互？我知道我不能直接写入他们的机器（安全和所有），但是我可以创建并提示他们保存它吗？
如何在内存中创建一个文件供用户下载，而不是通过服务器？
IT技术
javascript
file
web-applications
client-side
2021-01-06 16:33:31
6个回答
适用于 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!');
您可以使用数据 URI。浏览器支持各不相同；参见维基百科。例子：
<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>
octet-stream 是强制下载提示。否则，它可能会在浏览器中打开。
对于 CSV，您可以使用：
<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>
试试jsFiddle 演示。
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);
}
}
请注意，根据您的情况，您可能还想在删除.revokeObjectURL后调用URL.revokeObjectURLelem。根据URL.createObjectURL 的文档：
每次调用 createObjectURL() 时，都会创建一个新的对象 URL，即使您已经为同一个对象创建了一个。当您不再需要它们时，必须通过调用 URL.revokeObjectURL() 来释放它们中的每一个。当文档被卸载时，浏览器会自动释放这些；但是，为了获得最佳性能和内存使用，如果有可以明确卸载它们的安全时间，则应该这样做。
以上所有示例在 chrome 和 IE 中都可以正常工作，但在 Firefox 中却失败了。请考虑将锚点附加到正文并在单击后将其删除。
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';
// Append anchor to body.
document.body.appendChild(a);
a.click();
// Remove anchor from body
document.body.removeChild(a);
我很高兴使用FileSaver.js。它的兼容性非常好（IE10+和其他所有东西），并且使用起来非常简单：
var blob = new Blob(["some text"], {
type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");