Javascript ng> *创建一个小json文件*； 常量数组=[ “mp3/tupac_shakur-how-do-you-want-it.mp3”， “mp3/spice_one-born-to-die.mp3”， “mp3/captain\u planet\u theme\u song.mp3”， “mp3/tenchu intro.mp3”， “mp3/resident\u evil\u nemesis-intro-theme.mp3” ]; //在窗口上加载此函数 addEventListener（“加载”，下载列表）； //现在创建一个函数，每次单击都会更改href的内容 函数下载列表（）{ var changerehref=document.getElementById（“mp3Anchor”）； var j=-1； changeHref.addEventListener（“单击”，（）=>{ if（j

以下方法适用于IE10+、Edge、Opera、FF和Chrome：

const saveDownloadedData = (fileName, data) => {
    if(~navigator.userAgent.indexOf('MSIE') || ~navigator.appVersion.indexOf('Trident/')) { /* IE9-11 */
        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a')
        link.setAttribute('target', '_blank');
        if(Blob !== undefined) {
            const blob = new Blob([data], { type: 'text/plain' });
            link.setAttribute('href', URL.createObjectURL(blob));
        } else {
            link.setAttribute('href', 'data:text/plain,' + encodeURIComponent(data));
        }

        ~window.navigator.userAgent.indexOf('Edge')
            && (fileName = fileName.replace(/[&\/\\#,+$~%.'':*?<>{}]/g, '_')); /* Edge */

        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

---

使用Blob：

函数下载（内容、mimeType、文件名）{
var a=document.createElement（'a'）
var blob=新blob（[content]，{type:mimeType}）
var url=url.createObjectURL（blob）
a、 setAttribute（'href'，url）
a、 setAttribute（'下载'，文件名）
a、 单击（）
}

---

---

原创文章：

这不是一个跨浏览器解决方案，但绝对值得一看。例如，IE限制对数据uri的支持。IE 8限制大小为32KB，IE 7及更低版本根本不支持。在Chrome版本19.0.1084.46中，此方法生成以下警告：“资源被解释为文档，但使用MIME类型text/csv传输：“数据：text/csv，field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A”。“下载不触发编辑现在可以在Chrome中工作（针对v20和v21进行测试），但不能在IE9中工作（这可能只是JSFIDLE，但不知何故我对此表示怀疑）”。除非您有代码将其转换为UTF-8，否则正确的字符集几乎肯定是UTF-16。JavaScript在内部使用UTF-16。如果您有文本或CSV文件，请以“\ufeff”开头字符串，UTF-16BE的字节顺序标记，文本编辑器将能够正确读取非ASCII字符。只需添加download=“txt.CSV”"属性，以便具有正确的文件名和扩展名，并告诉您的操作系统如何处理它。我曾考虑过这一点，但从用户友好的角度来看，这是灾难性的。此外，文件必须使用CSV扩展名保存。尝试告诉您的用户。这在Chrome上非常有效。如何允许用户指定文件的位置磁盘上的e？哇，谢谢你提供了易于使用的库。这很容易是最好的答案，现在谁会在乎人们以任何方式使用HTML<5？@gregm我不确定你可以使用这个插件。@gregm：你是说下载位置吗？它与FileSaver.js无关，你需要设置浏览器配置，以便它在任何时候都能请求一个文件夹y下载，或使用

上的新版本。这是IE 10+系列浏览器的一个很好的解决方案。IE还不支持download HTML 5标记和此页面上的其他解决方案（以及讨论相同问题的其他SO页面）我们根本不为我工作。FileSaver ftw！是的。这正是@MatthewFlaschen所拥有的。是的，但是使用

下载
属性，您可以指定文件名；-），正如@earcam已经指出的那样。Chrome仅在文件名中不提供扩展名的情况下添加
txt
扩展名。如果您提供
下载（“data.json”），data）
它将按预期工作。这对我在Chrome（73.0.3683.86）和Firefox（66.0.2）中起作用。它在IE11（11.379.17763.0）和Edge（44.17763.1.0）中不起作用。但是：在
a上有一个抛出“访问被拒绝”的选项。单击（）
line，因为它认为blob URL是跨源的。@Matt data uri在某些浏览器中是跨源的。据我所知，不仅在msie中，在chrome中也是如此。您可以通过尝试将数据uri注入javascript来测试它。它将无法访问站点的其他部分。。。“上述所有示例在chrome和IE中都运行良好，但在Firefox中却失败了。"。由于答案的顺序会随着时间的推移而改变，所以在你写这篇文章时，不清楚哪些答案高于你的答案。你能准确指出哪些方法在Firefox中不起作用吗？非常感谢。我已经尝试了这里列出的所有示例，只有这一个适用于任何浏览器。这应该是公认的答案。对于AngularJS 1.x应用程序，你可以在创建URL时ild一组URL，然后在组件的$onDestroy功能中清理它们。这对我来说非常有用。其他答案导致
失败：Chrome中的网络错误
。这一个很好。这对我在Chrome（73.0.3683.86）、Firefox（66.0.2）、IE11（11.379.17763.0）和Edge（44.17763.1.0）中很有效。对于那些希望避免URL上的垃圾收集或奇怪行为的人，只需如下声明blob:
const URL=URL.createObjectURL（blob，{oneTimeOnly:true}）
。如果需要，您可以随时保存blob并在以后生成新的Url。在能够发表评论之前，可能需要使用encodeURI的Scape数据，正如我在此处建议的那样：我无法接受建议。奇怪的是……我更新了代码。这种方法与创建blob之间有什么区别？包括这么大的数据，以及对我只是使用jquery来附加事件（onclick和onready）和设置属性，这也可以通过vanilla JS来实现不需要jquery。数据uri方法仍然存在大小限制，不是吗？msSaveOrOpenBlob在这里显示为过时：它在Chrome上运行得很好，但在Firefox上不起作用。它确实生成一个文件并下载，但文件是空的。没有内容。知道为什么吗？没有在IE上测试过。除了该函数没有名称，这是my FavoriteText Encoder目前是高度实验性的，我建议避免（或多填充）它。另请参阅：感谢-刚刚测试-在Windows上与Firefox、Chrome和Edge一起使用。您可以在新选项卡中打开文件，保留指定的文件名，但不下载，只在选项卡中打开吗？
<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.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")

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

<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>

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

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

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);
}

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

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);
    }
}

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

yarn add js-file-download
npm install --save js-file-download

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

<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>

*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");
          }
}

const saveDownloadedData = (fileName, data) => {
    if(~navigator.userAgent.indexOf('MSIE') || ~navigator.appVersion.indexOf('Trident/')) { /* IE9-11 */
        const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a')
        link.setAttribute('target', '_blank');
        if(Blob !== undefined) {
            const blob = new Blob([data], { type: 'text/plain' });
            link.setAttribute('href', URL.createObjectURL(blob));
        } else {
            link.setAttribute('href', 'data:text/plain,' + encodeURIComponent(data));
        }

        ~window.navigator.userAgent.indexOf('Edge')
            && (fileName = fileName.replace(/[&\/\\#,+$~%.'':*?<>{}]/g, '_')); /* Edge */

        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

saveDownloadedData('test.txt', 'Lorem ipsum');

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);
}



// Start file download.
download("hello.txt","This is the content of my file :)");