有什么方法可以在客户端创建一个文本文件,并提示用户下载它,而不与服务器进行任何交互? 我知道我不能直接写到他们的机器上(安全等),但是我可以创建并提示他们保存它吗?
当前回答
根据@Rick的回答,这真的很有帮助。
如果你想以这种方式共享字符串数据,你必须转义字符串数据:
$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));
` 抱歉,我不能评论@Rick的回答,因为我目前在StackOverflow的声誉很低。
分享了一个编辑建议,但被拒绝了。
其他回答
适用于IE10的解决方案: (我需要一个csv文件,但它足以改变类型和文件名txt)
var csvContent=data; //here we load our csv data
var blob = new Blob([csvContent],{
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, "filename.csv")
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!');
一个例子,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()来释放它们。当文档被卸载时,浏览器会自动释放这些;但是,为了优化性能和内存使用,如果存在可以显式卸载它们的安全时间,则应该这样做。
如前所述,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()
这个解决方案直接从tiddlywiki的(tiddlywiki.com) github存储库中提取。我在几乎所有的浏览器中都使用过tiddlywiki,它就像一个魅力:
function(filename,text){
// Set up the link
var link = document.createElement("a");
link.setAttribute("target","_blank");
if(Blob !== undefined) {
var blob = new Blob([text], {type: "text/plain"});
link.setAttribute("href", URL.createObjectURL(blob));
} else {
link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
}
link.setAttribute("download",filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
Github回购: 下载保护程序模块
推荐文章
- src和dist文件夹的作用是什么?
- jQuery UI对话框-缺少关闭图标
- 如何使用AngularJS获取url参数
- 将RGB转换为白色的RGBA
- 如何将“camelCase”转换为“Camel Case”?
- 我们可以在另一个JS文件中调用用一个JavaScript编写的函数吗?
- 如何使用JavaScript重新加载ReCaptcha ?
- jQuery。由于转义了JSON中的单引号,parseJSON抛出“无效JSON”错误
- 在JavaScript关联数组中动态创建键
- ReactJS和公共文件夹中的图像
- 在React Native中使用Fetch授权头
- 为什么我的球(物体)没有缩小/消失?
- 如何使用jQuery检测页面的滚动位置
- if(key in object)或者if(object. hasownproperty (key)
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?