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>

八位流是强制下载提示符。否则，它可能会在浏览器中打开。

对于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()

我们可以使用URL api，特别是URL. createobjecturl()和Blob api来编码和下载几乎任何东西。

如果你的下载量很小，这很好:

document.body.innerHTML + = <a id="download" download="PATTERN. "json " href = " $ {URL。createObjectURL(新团([JSON。stringify(“HELLO WORLD”,null, 2))))} " > < / >点击我的 download.click () 下载。outerHTML = ""

如果您的下载量很大，那么不使用DOM，更好的方法是使用下载参数创建一个link元素，并触发单击。

注意link元素并没有被添加到文档中，但是点击仍然可以工作!这可以通过这种方式创建数百个Mo的下载，因为DOM没有被修改(否则DOM中的巨大URL可能是制表符冻结的来源)。

Const堆栈= { 一些:“东西”, 阿洛特:“他们的!” ｝ BUTTONDOWNLOAD。Onclick =(函数(){ let j = document.createElement("a") j.download = "stack_"+Date.now()+".json" j.href = URL。createObjectURL(新团([JSON。Stringify (stack, null, 2)]) j.click () }) <按钮id = " BUTTONDOWNLOAD " >下载!< / >按钮

奖金!下载任何循环对象，避免错误:

TypeError:循环对象值(Firefox 循环结构JSON (Chrome和Opera) TypeError:循环 不支持在值参数中引用(Edge)

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

在本例中，下载json格式的文档对象。

/* 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()

下载文件扩展或没有扩展的例子中，我使用的是JSON。您可以添加数据和扩展。你可以使用mac地址。Json在这里，如你所愿。如果你想添加一个扩展名，在那里添加，否则，只写没有扩展名的文件名。

let myJson = JSON.stringify(yourdata);
    let element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(myJson));
    element.setAttribute('download', 'MAC-Addresses.json');
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);

以下方法适用于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，可以用来创建和下载文件。