這個主題已經有一些問題,但沒有一個答案似乎做我想做的事情(或者我找不到合適的答案)。JavaScript提供客戶端JSON對象的下載
我有一個JSON對象,它是而不是服務器端的文件並且已經在客戶端。我希望爲用戶提供下載,不僅在新頁面上顯示JSON,而且他們的瀏覽器通過單擊某個按鈕爲他們提供下載。我想要一個保存文件出現的對話框。
這是我迄今爲止:
在流星應用定義的事件監聽器:
'click .js-download'(event, instance) {
// Prevent default browser form submit
event.preventDefault();
export_data = {};
export_data['metadata'] = instance.state.get('vocabulary_metadata');
list_of_words = VocabularyItems
.find({})
.map((elem, ind, arr) => elem);
list_of_words
.forEach((word) => {delete word._id});
learned_count = list_of_words
.filter((word) => word.metadata.learned)
.length;
export_data['metadata']['learned_percentage'] = (
100.0/list_of_words.length * learned_count);
export_data['words'] = list_of_words;
this.href = 'data:plain/text,' + JSON.stringify(export_data);
var dataURI = 'data:application/json;charset=utf-8,'
+ encodeURIComponent(JSON.stringify(export_data));
window.location.replace(dataURI);
}
上面的代碼構造JSON stringifies它並將其編碼爲URI,然後將其重定向到。但是,它僅在新選項卡中打開JSON,而不是顯示下載對話框(至少在Firefox中)。從那裏我可以使用JSON查看器的一些瀏覽器內置按鈕來保存它。
事件監聽器是一個簡單的button
定義:
<div class="form-field">
<label for="export-file-input">Export to JSON file:</label>
<button class="js-download">Download</button>
</div>
我也想避免的是:
- 頻繁更新鏈接的
src
屬性包含JSON的編碼形式,因爲該源的更改將是應用程序的主要功能 - 插入人造元素,只能點擊它們,如果它們在一瞬間可見,則更糟糕
首選是一個純粹的JS解決方案,如果存在的話,也許如果有一個「非哈克」解決方案,這將是偉大的。我仍然希望用戶能夠選擇保存文件的位置。這不是繞過任何用戶控制。就瀏覽器兼容性而言,我很滿意它在最新的瀏覽器上運行,並且不關心IE或類似的東西。