我将使用一个<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");
          }
}

根据@Rick的回答，这真的很有帮助。

如果你想以这种方式共享字符串数据，你必须转义字符串数据:

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

｀ 抱歉，我不能评论@Rick的回答，因为我目前在StackOverflow的声誉很低。

分享了一个编辑建议，但被拒绝了。

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

下载文件扩展或没有扩展的例子中，我使用的是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);

使用Blob:

function download(content, mimeType, filename){
  const a = document.createElement('a') // Create "a" element
  const blob = new Blob([content], {type: mimeType}) // Create a blob (file-like object)
  const url = URL.createObjectURL(blob) // Create an object URL from blob
  a.setAttribute('href', url) // Set "a" element link
  a.setAttribute('download', filename) // Set download filename
  a.click() // Start downloading
}

所有现代浏览器都支持Blob。 Caniuse支持表Blob:

这是一把小提琴

这里是MDN文档

Blob对象表示一个Blob，它是一个类似文件的不可变原始数据对象;它们可以被读取为文本或二进制数据。

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