下面这个函数是有效的。

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

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

来自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')

这个解决方案直接从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回购: 下载保护程序模块

我们可以使用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()

一个例子，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()来释放它们。当文档被卸载时，浏览器会自动释放这些;但是，为了优化性能和内存使用，如果存在可以显式卸载它们的安全时间，则应该这样做。