Javascript экспорт локального хранилища - PullRequest
0 голосов
/ 04 мая 2020

У меня есть этот фрагмент кода на сайте, который экспортирует содержимое локального хранилища в файл в формате JSON.
По какой-то причине он перестал работать. Я тестировал его в нескольких браузерах, но все одинаково ... Не отображаются ошибки, но он также не экспортируется.
Различные переменные кажутся хорошими, но он просто не экспортируется.
Если честно Я понятия не имею, как сделать это по-другому, поэтому любая помощь будет оценена.

Thx

function exportHistory() {  
    console.log("started"); 
    var _myArray = JSON.stringify(localStorage , null, 4); //indentation in json format, human readable

    var vLink = document.getElementById('exportHistory'),
    var vBlob = new Blob([_myArray], {type: "octet/stream"}),
    vName = 'working_history_' + todayDate() + '.json',
    vUrl = window.URL.createObjectURL(vBlob);
    console.log(vLink);

    vLink.setAttribute('href', vUrl);
    vLink.setAttribute('download', vName );
    console.log("finished");    
}



<button class="btn btn-outline-secondary btn-sm" id="exportHistory" onclick="exportHistory()">Export History</button >

1 Ответ

1 голос
/ 04 мая 2020

Здесь вам нужно добавить атрибут download к тегу привязки <a>, а не саму кнопку нажатия. Вам нужно создать тег привязки с display:none и программно щелкнуть по нему, чтобы загрузить файл. Вот пример. Обратите внимание, что кнопка используется только для выполнения функции, а атрибуты href и download добавляются в тег <a>.

function exportHistory() {  
    console.log("started"); 
    var _myArray = JSON.stringify(localStorage , null, 4); //indentation in json format, human readable


    //Note: We use the anchor tag here instead button.
    var vLink = document.getElementById('exportHistoryLink');

    var vBlob = new Blob([_myArray], {type: "octet/stream"});
    vName = 'working_history_' + todayDate() + '.json';
    vUrl = window.URL.createObjectURL(vBlob);
    console.log(vLink);

    vLink.setAttribute('href', vUrl);
    vLink.setAttribute('download', vName );

    //Note: Programmatically click the link to download the file
    vLink.click();

    console.log("finished");    
}

Теперь добавьте пустой тег привязки в DOM.

<button class="btn btn-outline-secondary btn-sm" id="exportHistory" onclick="exportHistory()">Export History</button > 

<a id="exportHistoryLink" style="display: none;">Export</a>
...