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

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

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

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

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

适用于 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")

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

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

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

$('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();

该解决方案直接从 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 repo：下载保护程序模块

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

如果你想以这种方式分享它，你必须对字符串进行转义：data

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

` 对不起，由于我目前在 StackOverflow 中的声誉较低，我无法对 @Rick 的回答发表评论。

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

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.createObjectURL 的文档：elem

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

如前所述，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()

对我来说，这非常有效，下载了相同的文件名和扩展名

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

“title”是带有扩展名的文件名，即、、等。sample.pdfwaterfall.jpg

'file64' 是 base64 内容，如下所示，即Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

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

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

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

我们可以使用 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 = ""

如果你的下载量很大，而不是使用 DOM，更好的方法是创建一个带有下载参数的链接元素，并触发点击。

请注意，链接元素不会附加到文档中，但无论如何单击都可以！这可以通过这种方式创建数百个 Mo 的下载，因为 DOM 没有被修改（否则 DOM 中的巨大 URL 可能会成为选项卡冻结的来源）。

const stack = {
 some: "stuffs",
 alot: "of them!"
}

BUTTONDOWNLOAD.onclick = (function(){
  let j = document.createElement("a")
  j.download = "stack_"+Date.now()+".json"
  j.href = URL.createObjectURL(new Blob([JSON.stringify(stack, null, 2)]))
  j.click()
})

<button id="BUTTONDOWNLOAD">DOWNLOAD!</button>

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

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

JSON 的循环结构（Chrome 和 Opera） TypeError：循环

不支持值参数中的引用 （Edge）

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

在此示例中，将对象下载为 json。document

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

我会使用一个标签，然后设置.然后，在元素之间放置一个图像，以便我可以有一个视觉效果来看到它。如果你愿意，你可以创建一个函数来改变 这样它就不仅仅是同一个链接，而是动态的。<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");
          }
}

以下方法适用于 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);
    }
}

因此，只需调用函数：

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

使用 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。
Blob 的 Caniuse 支持表：

这是一把小提琴

这里是 MDN 文档

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

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

原文 ： https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server

下载示例中带有扩展名或不带扩展名的文件，我使用的是 JSON。您可以添加您的数据和扩展程序。您可以根据自己的意愿在此处使用“MAC-Addresses.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);