2017-06-11 34 views
0

這個主題已經有一些問題,但沒有一個答案似乎做我想做的事情(或者我找不到合適的答案)。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或類似的東西。

回答

相關問題