Question

我正在尝试创建一个函数，我可以生成一个blob .json文件，然后我想下载它。

我已经检查过并发现了一种方法。

function download_rapport(){
    var data = geojson.features.map(function(row) { return row.properties; });
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "application/json"});
    var url  = URL.createObjectURL(blob);

    var a = document.createElement('a');
    a.download    = "backup.json";
    a.href        = url;
    a.textContent = "Download backup.json";

    document.getElementById('content_test').innerHTML = a.outerHTML;
    // 'çontent_test' is a <div>
};

这非常有效，但是，此方法使用链接进行下载。我更喜欢使用按钮，因为它更适合我的应用程序的其余部分。

我使用多种方法尝试获取下载按钮，但我总是最终得到一个按钮，将我发送到一个新页面，其中我需要的数据显示为字符串。

有没有办法更改我的功能，以便生成下载按钮而不是下载链接？

修改

我在Midas的帮助下编辑了我的代码。但是，当我更改var json中的数据并尝试下载“新”文件时，它将始终下载“第一个”var json。

我想要的是能够更改var json数据，并始终下载它的“最新”版本。

window.onload = function testreer() {
    var data = geojson.features.map(function(row) { return row.properties; });
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "application/json"});
    var url  = URL.createObjectURL(blob);

    var a = document.createElement('a');
    var b = document.createElement('button');

    a.download = blob;
    a.href = url;
    b.innerText = 'Download';

    document.getElementById('content_test').appendChild(b);
    b.appendChild(a);

    b.addEventListener('click', function() {
        a.click();
    });
}

Answer 1

试试这个如果您想要的话，我已在链接中添加了一个按钮。

function download_rapport(){
    var data = geojson.features.map(function(row) { return row.properties; });
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "application/json"});
    var url  = URL.createObjectURL(blob);

    var a = document.createElement('a');
    a.download    = "backup.json";
    a.href        = url;
    // 'çontent_test' is a <div>

    var btn = document.createElement('button');
    btn.value="download";
    btn.innerHTML = "Download JSON";
    a.appendChild(btn);

    document.getElementById('content_test').innerHTML = a.outerHTML;
};

Answer 2

如果您愿意，可以将其转换为按钮

替换

document.createElement('a');

与

document.createElement("BUTTON");

Answer 3

由于按钮没有像href标记那样的a属性，因此您必须动态地将所需操作分配给onclick事件。一个例子如下：

＆＃13;

window.onload = function()
{
    var url = 'http://lipsum.com';

    var btn = document.createElement('button');
    btn.innerText = 'Download';
    document.getElementById('content_test').appendChild(btn);

    btn.addEventListener('click', function(){
        window.location.href = url;
    });
}

＆＃13;

<div id="content_test"></div>

＆＃13;

修改

由于该文件不是来自服务器，您可以同时创建a标记和button标记，并在单击该按钮时以编程方式触发链接：

＆＃13;
＆＃13;
window.onload = function() { var url = 'http://lorempixel.com/400/300/technics/'; var a = document.createElement('a'); var b = document.createElement('button'); a.download = 'technics.jpg'; a.href = url; b.innerText = 'Download'; document.getElementById('content_test').appendChild(b); b.appendChild(a); b.addEventListener('click', function() { a.click(); }); }
＆＃13;
<div id="content_test"></div>
＆＃13;
＆＃13;
＆＃13;

但是，在正常情况下，您可以在服务器端设置Content-Disposition: attachment，告诉浏览器该文件将被下载。

Answer 4

我决定放弃将链接更改为按钮。相反，我将使用CSS将链接设置为按钮的样式。在检查后我发现，尽管可以更改指向按钮的链接，但使用CSS来设置它的样式会更快。

我通过添加a.id = "downloadLink"来编辑我的代码，以便为生成的<a>提供ID。然后在我的CSS文件中设置此ID。

var a = document.createElement('a');
    a.download    = "backup.json";
    a.href        = url;
    a.id          = "downloadLink";
    a.textContent = "Download backup.json";

通过JavaScript {HTML

4 个答案: