jquery - javascript button to download a file - Stack Overflow

admin管理员组

文章数量:1244302

I want to download a JSON(or XML) file by pressing a button. In HTML I define:

<a id="exportJSON" onclick="exportJson()" class="btn"><i class="icon-download"></i> export json</a>

In JavaScipt I have following code:

function exportJson() {
   var obj = {a: 123, b: "4 5 6"};
   var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
   // what to return in order to show download window?
}

I found a very nice answer in Stackoveflow, but I fail to adjust it into my problem, mainly show the download window. I do not want to create another link somewhere in the page (like done in above mentioned answer, just directly show download window).

I want to download a JSON(or XML) file by pressing a button. In HTML I define:

<a id="exportJSON" onclick="exportJson()" class="btn"><i class="icon-download"></i> export json</a>

In JavaScipt I have following code:

function exportJson() {
   var obj = {a: 123, b: "4 5 6"};
   var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
   // what to return in order to show download window?
}

I found a very nice answer in Stackoveflow, but I fail to adjust it into my problem, mainly show the download window. I do not want to create another link somewhere in the page (like done in above mentioned answer, just directly show download window).

• javascript
• jquery
• html
• json
• download

Share Improve this question Follow asked Oct 16, 2014 at 21:25 BobBob 10.8k2525 gold badges6565 silver badges7272 bronze badges 2

• 1 Try changing the mime type to application/json – Dave Commented Oct 16, 2014 at 21:36
• It writes into the file: {"error": "Please use POST request"}. This is wrong! – Bob Commented Oct 17, 2014 at 6:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

UPDATE

http://jsfiddle/2k4LtaLw/5/

Change your a to this

<a id="exportJSON" onclick="exportJson(this);" class="btn"><i class="icon-download"></i> export json</a>

The function

function exportJson(el) {

    var obj = {
        a: 123,
        b: "4 5 6"
    };
    var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
    // what to return in order to show download window?

    el.setAttribute("href", "data:"+data);
    el.setAttribute("download", "data.json");    
}

本文标签： jqueryjavascript button to download a fileStack Overflow