有什么方法可以在客户端上创建文本文件并提示用户下载文本文件，而无需与服务器进行任何交互？我知道我不能直接写给他们的机器（安全性和全部），但是我可以创建并提示他们保存吗？

#1楼

您甚至可以做一个比URI更好的事情-使用Chrome，您还可以建议文件的名称，如本博客文章中有关使用URI命名下载的说明中所述。

#2楼

我很高兴使用FileSaver.js 。它的兼容性非常好（IE10 +和其他所有功能），并且使用非常简单：

var blob = new Blob(["some text"], {type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");

#3楼

适用于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!');

#4楼

在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")

#5楼

上面的所有示例在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);

#6楼

以下方法适用于IE11 +，Firefox 25+和Chrome 30+：

<a id="export" class="myButton" download="" href="#">export</a>
<script>function createDownloadLink(anchorSelector, str, fileName){if(window.navigator.msSaveOrOpenBlob) {var fileData = [str];blobObject = new Blob(fileData);$(anchorSelector).click(function(){window.navigator.msSaveOrOpenBlob(blobObject, fileName);});} else {var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);$(anchorSelector).attr("download", fileName);               $(anchorSelector).attr("href", url);}}$(function () {var str = "hi,file";createDownloadLink("#export",str,"file.txt");});</script>

在操作中查看此内容： http : //jsfiddle.net/Kg7eA/

Firefox和Chrome支持数据URI进行导航，这使我们可以通过导航到数据URI来创建文件，而IE出于安全目的不支持它。

另一方面，IE具有用于保存Blob的API，可用于创建和下载文件。

#7楼

自2014年4月起，W3C中可能尚未对FileSytem API进行标准化。我猜，任何使用blob查看解决方案的人都应谨慎对待线程。

HTML5引起轰动

FileSytem API上的W3C邮件列表

#8楼

如果您只想转换一个字符串以供下载，则可以使用jQuery尝试一下。

$('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));

#9楼

var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();

#10楼

此解决方案直接从tiddlywiki（tiddlywiki.com）github存储库中提取。我在几乎所有浏览器中都使用过tiddlywiki，它的工作原理很像：

function(filename,text){// Set up the linkvar 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仓库：下载保护程序模块

#11楼

基于@Rick的答案，这真的很有帮助。

如果要以这种方式共享，则必须对字符串data进行转义：

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

`抱歉，由于我目前在StackOverflow中的低声誉，我无法对@Rick的答案发表评论。

编辑建议已被共享并被拒绝。

#12楼

上述所有解决方案均不适用于所有浏览器。这是在IE 10 +，Firefox和Chrome（并且没有 jQuery或任何其他库）上最终可以使用的功能：

save: function(filename, data) {var blob = new Blob([data], {type: 'text/csv'});if(window.navigator.msSaveOrOpenBlob) {window.navigator.msSaveBlob(blob, filename);}else{var elem = window.document.createElement('a');elem.href = window.URL.createObjectURL(blob);elem.download = filename;        document.body.appendChild(elem);elem.click();        document.body.removeChild(elem);}
}

请注意，根据您的情况，您可能还希望在删除elem之后调用URL.revokeObjectURL 。根据URL.createObjectURL的文档：

每次调用createObjectURL（）时，都会创建一个新的对象URL，即使您已经为同一对象创建了一个URL。当您不再需要它们时，必须通过调用URL.revokeObjectURL（）释放它们。卸载文档时，浏览器将自动释放这些文件。但是，为了获得最佳性能和内存使用率，如果有安全的时间可以明确卸载它们，则应该这样做。

#13楼

您可以使用数据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演示。

#14楼

如果文件包含文本数据，我使用的一种技术是将文本放入textarea元素中，并让用户选择它（单击textarea，然后按ctrl-A），然后复制，然后粘贴到文本编辑器。

#15楼

如前所述， filesaver是一个很好的软件包，可以在客户端使用文件。但是，对于大文件来说效果不佳。 StreamSaver.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()

#16楼

对我来说，这很完美，下载了相同的文件名和扩展名

<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>

“标题”是与扩展，即，文件名sample.pdf ， waterfall.jpg等。

“file64”是的base64内容是这样的，即， Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

#17楼

来自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 optionalfileDownload(data, 'filename.csv', 'text/csv')

#18楼

这个下面的功能起作用了。

 private createDownloadableCsvFile(fileName, content) {let link = document.createElement("a");link.download = fileName;link.href = `data:application/octet-stream,${content}`;return link;}

#19楼

我们可以使用URL api，尤其是URL.createObjectURL（）和Blob api来编码和下载几乎所有内容。

 document.body.innerHTML += `<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify("HELLO WORLD", null, 2)]))}"> Click me</a>` download.click() download.outerHTML = ""

奖金！ 下载任何循环对象，避免错误：

TypeError：循环对象值（Firefox）TypeError：正在转换

JSON（Chrome和Opera）的圆形结构TypeError：圆形

不支持value参数中的引用（边缘）

使用https://github.com/douglascrockford/JSON-js/blob/master/cycle.js

 /* JSON.decycle */ if(typeof JSON.decycle!=="function"){JSON.decycle=function decycle(object,replacer){"use strict";var objects=new WeakMap();return(function derez(value,path){var old_path;var nu;if(replacer!==undefined){value=replacer(value)} if(typeof value==="object"&&value!==null&&!(value instanceof Boolean)&&!(value instanceof Date)&&!(value instanceof Number)&&!(value instanceof RegExp)&&!(value instanceof String)){old_path=objects.get(value);if(old_path!==undefined){return{$ref:old_path}} objects.set(value,path);if(Array.isArray(value)){nu=[];value.forEach(function(element,i){nu[i]=derez(element,path+"["+i+"]")})}else{nu={};Object.keys(value).forEach(function(name){nu[name]=derez(value[name],path+"["+JSON.stringify(name)+"]")})} return nu} return value}(object,"$"))}} document.body.innerHTML += `<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify(JSON.decycle(document), null, 2)]))}"></a>` download.click()

#20楼

我会使用<a></a>标记，然后设置href='path' 。然后，将图像放置在<a>元素之间，以便可以看到图像。如果愿意，可以创建一个函数来更改href以便它不仅是相同的链接，而且是动态的。

如果要使用javascript访问<a>标记，请为其指定一个id 。

从HTML版本开始：

<a href="mp3/tupac_shakur-how-do-you-want-it.mp3" download id="mp3Anchor"><img src="some image that you want" alt="some description" width="100px" height="100px" />
</a>

现在使用JavaScript：

*Create a small json file*;const array = ["mp3/tupac_shakur-how-do-you-want-it.mp3","mp3/spice_one-born-to-die.mp3","mp3/captain_planet_theme_song.mp3","mp3/tenchu-intro.mp3","mp3/resident_evil_nemesis-intro-theme.mp3"
];//load this function on window
window.addEventListener("load", downloadList);//now create a function that will change the content of the href with every click
function downloadList() {var changeHref=document.getElementById("mp3Anchor");var j = -1;changeHref.addEventListener("click", ()=> {if(j < array.length-1) {j +=1;changeHref.href=""+array[j];}else {alert("No more content to download");}
}

如何在内存中创建文件供用户下载，而不是通过服务器下载？相关推荐

Linux使用非root用户在根目录中创建文件夹
使用非root用户在根目录中创建文件夹时出现以下问题:mycentos(非root用户名)权限不够使用 sudo mkdir test 指令提示 mycentos(非root用户名)不在 sud ...
在windows中创建一个影子用户
在windows中创建一个影子用户(看不到图请下载附件) 我们可以在windows操作系统中建立一个影子用户,也就是它是实际存在的,但是不会在登录时或者用户组中显示,我们可以赋予影子用户管理员权限,可 ...
配置内存中OLTP文件组提高性能
在今天的文章里,我想谈下使用内存中OLTP的内存优化文件组来获得持久性,还有如何配置它来获得高性能.在进入正题前,我想简单介绍下使用你数据库里这个特定文件组,内存OLTP是如何获得持久性的. 内存中O ...
vb在服务器上新建文件夹,vb.net-如果不存在，如何在VB中创建文件夹？
vb.net-如果不存在,如何在VB中创建文件夹? 我为自己编写了一个小小的下载应用程序,以便我可以轻松地从服务器上获取一组文件,然后将它们全部放入带有全新安装的Windows的新PC上,而无需实际运 ...
在内存中创建临时表和表变量
在Disk-Base数据库中,由于临时表和表变量的数据存储在tempdb中,如果系统频繁地创建和更新临时表和表变量,大量的IO操作集中在tempdb中,tempdb很可能成为系统性能的瓶颈.在SQL ...
如何在终端窗口中在Linux中创建文件？
本文翻译自:How to create a file in Linux from terminal window? 在Linux终端中创建文件最简单的方法是什么? #1楼参考:https://sta ...
在linux系统中创建文件夹,Linux系统中创建文件夹命令详解
Linux系统中创建一个新的文件夹我们可以使用命令来执行,下面由学习啦小编为大家整理了Linux系统中创建文件夹命令详解,希望对大家有帮助! Linux系统中创建文件夹命令详解一.mkdir命令使用 ...
在docker容器中创建用户组和用户，并且多用户共用一个anaconda环境
转载自:https://www.cnblogs.com/devilmaycry812839668/p/13760815.html 在docker容器中创建用户组和用户,并且多用户共用一个anacond ...
获取保存在沙盒中plist文件的用户的字典信息
获取保存在沙盒中plist文件的用户的字典信息

如何在内存中创建文件供用户下载，而不是通过服务器下载？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

#7楼

#8楼

#9楼