Question

我知道有类似的话题，但我找不到我想要的内容。

要求是，在点击元素（例如按钮）时生成并下载带有给定名称和扩展名的文件。生成此文件的计算成本很高，因此我无法事先计算它并将其添加到链接/ <a>的href属性中，就像许多答案中提出的那样。

var obj = {a: 123, b: "4 5 6"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

$('<a href="data:' + data + '" download="data.json">download JSON</a>').appendTo('#container');

我还找到this answer，但显然无法在此处指定文件名。

所以我想知道这是否可能，或者由于安全限制而有可能被禁止（有意义）？

Answer 1

这是一个很好的下载功能，它将文件名和内容作为输入并自动下载。

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.
document.getElementById("dwn-btn").addEventListener("click", function(){
    // Generate download of hello.txt file with some content
    var text = document.getElementById("text-val").value;
    var filename = "hello.txt";
    
    download(filename, text);
}, false);

<textarea id="text-val" rows="4">This is the content of my file</textarea><br/>
<input type="button" id="dwn-btn" value="Download dynamically generated text file"/>

Answer 2

您可以使用javascript动态创建数据。

以下是我正在使用的代码。

function downloadFile() {
    var obj = {a: 123, b: "4 5 6"};
    var filename = "download.json";
    var blob = new Blob([JSON.stringify(obj)], {type: 'text/plain'});
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, filename);
    } else{
        var e = document.createEvent('MouseEvents'),
        a = document.createElement('a');
        a.download = filename;
        a.href = window.URL.createObjectURL(blob);
        a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');
        e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        a.dispatchEvent(e);
    }
}

html代码是

<input type="button" onclick="downloadFile();" value="Download">

希望它会帮助你。

Answer 3

对于搜索此问题的人：

有两种生成和发送 Javascript、URL 或 BLOB 文件的方法，示例代码已在上面的答案中显示。

您可能会关心 URL 的最大长度是否适合传递文件，没关系，总结在 this question (stackoverflow.com)，IE 以外的现代浏览器支持足够长的 URL（从 2GB 到几乎无限，并且标准还规定至少需要支持8000字节的长度）。

当然，您也可以选择第三方库来实现file-saver (npmjs.com)等功能。

从JS生成并下载文件

3 个答案: