在内存中创建一个文件供用户下载,而不是通过服务器
有什么办法可以在客户端创建一个文本文件并提示用户下载它,而不需要与服务器进行任何交互? 我知道我不能直接写他们的机器(安全和所有),但我可以创建并提示他们保存它吗?
您可以使用数据URI。 浏览器支持变化 请参阅维基百科。 例:
<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>
八位字节流将强制下载提示。 否则,它可能会在浏览器中打开。
对于CSV,您可以使用:
<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>
试试jsFiddle演示。
适用于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>
上述所有示例在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);
链接地址: http://www.djcxy.com/p/27795.html
上一篇: Create a file in memory for user to download, not through server