在使用javascript的按鈕中使用HTML5下載選項

Question

我想寫一個Javascript函數，它通過向其中添加變量來下載json文件。像這樣的東西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'); 

但現在我想用按鈕替換錨標記。 我使用ExtJS的6

Answer 1

您可以使用ExtJS的按鈕，像這樣：

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

工作例如：https://fiddle.sencha.com/#fiddle/1chg

Answer 2

你可以做兩件事情..

1. 風格你a標記，以便它看起來像一個button。

2. 放一個button的a標籤

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

爲button裏面沒有一個download屬性，所以你需要使用a標籤。