有什么方法可以在客户端创建一个文本文件,并提示用户下载它,而不与服务器进行任何交互? 我知道我不能直接写到他们的机器上(安全等),但是我可以创建并提示他们保存它吗?
当前回答
您可以使用数据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演示。
其他回答
如前所述,filesaver是在客户端处理文件的一个很棒的包。但是,它不能很好地处理大文件。streamsave .js是一个可以处理大文件的替代解决方案(在FileServer.js中指向):
const fileStream = streamSaver.createWriteStream('filename.txt', size);
const writer = fileStream.getWriter();
for(var i = 0; i < 100; i++){
var uint8array = new TextEncoder("utf-8").encode("Plain Text");
writer.write(uint8array);
}
writer.close()
您可以使用数据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演示。
来自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')
根据@Rick的回答,这真的很有帮助。
如果你想以这种方式共享字符串数据,你必须转义字符串数据:
$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));
` 抱歉,我不能评论@Rick的回答,因为我目前在StackOverflow的声誉很低。
分享了一个编辑建议,但被拒绝了。
如果你只是想把一个字符串转换成可以下载的,你可以使用jQuery尝试一下。
$('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));