使用JavaScript在按钮中使用HTML5下载选项

Question

I want to write a Javascript function which downloads json file by adding variables into it. Something like this https://jsfiddle.net/cowboy/hHZa9/

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

But now I want replace anchor tag with button. I am using ExtJS 6.

Answer 1

You can use Extjs button like this:

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

Ext.widget('button', {
    renderTo: Ext.getBody(),

    text: 'Download',

    href: 'data:' + data,

    autoEl: {
        tag: 'a',
        download: 'data.json'
    }
});

Working example: https://fiddle.sencha.com/#fiddle/1chg

Answer 2

You can do two things..

1. Style your a tag so that it looks like a button .

2. Put a button inside the a tag

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

as button does not have a download attribute so you need to use the a tag.