在内存中创建一个文件供用户下载,而不是通过服务器

Question

有没有办法在客户端创建文本文件并提示用户下载它,而不与服务器进行任何交互？我知道我不能直接写入他们的机器(安全性和所有),但是我可以创建并提示他们保存它吗？

Answer 1

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

Answer 2

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

Answer 3

以上所有解决方案都不适用于所有浏览器.以下是最终适用于IE 10 +,Firefox和Chrome(以及没有 jQuery或任何其他库)的内容:

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

请注意,根据您的具体情况,您可能还希望在删除后调用URL.revokeObjectURLelem.根据URL.createObjectURL的文档:

每次调用createObjectURL()时,即使您已经为同一个对象创建了一个对象URL,也会创建一个新的对象URL.必须通过在不再需要URL.revokeObjectURL()时调用其中的每一个来释放它们.浏览器将在卸载文档时自动释放这些内容; 但是,为了获得最佳性能和内存使用情况,如果有明确卸载它们的安全时间,则应该这样做.

Answer 4

所有上述示例在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);

Answer 5

我很高兴使用FileSaver.js.它的兼容性非常好(IE10 +和其他所有东西),使用起来非常简单:

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

Answer 6

使用斑点：

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，它是不可变的原始数据的类似文件的对象；它们可以读取为文本或二进制数据......

Answer 7

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

Answer 8

我们可以使用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 的下载。

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>

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

类型错误：循环对象值 (Firefox) 类型错误：正在转换

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

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

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

在此示例中，将document对象下载为 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()

Answer 9

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

Answer 10

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

Answer 11

如果您只想将字符串转换为可供下载,可以使用jQuery尝试.

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

Answer 12

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

Answer 13

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

Answer 14

该包的js文件下载从github.com/kennethjiang/js-file-download手柄边缘的情况下对浏览器的支持：

查看源代码以查看其如何使用此页面上提到的技术。

安装

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

用法

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

Answer 15

截至2014年4月,FileSytem API可能未在W3C中标准化.我想,任何用blob查看解决方案的人都应该小心谨慎.

HTML5摇摇欲坠

FileSytem API上的W3C邮件列表

Answer 16

根据@Rick的答案,这真的很有帮助.

data如果你想以这种方式分享它,你必须scape字符串:

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

"抱歉,由于我目前在StackOverflow中的声誉很低,我无法对@ Rick的答案发表评论.

一个编辑的建议是共享和拒绝.

Answer 17

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