Новое окно и неверное имя файла при сохранении данных в виде файла CSV - PullRequest
Новая
       60

Новое окно и неверное имя файла при сохранении данных в виде файла CSV

0 голосов
/ 25 апреля 2020

Я получаю некоторые данные CSV из запроса Ajax. Я пытаюсь использовать FileSaver. js (https://github.com/eligrey/FileSaver.js/), чтобы конечный пользователь мог напрямую загрузить эти данные в виде файла CSV.

Это код, используемый в моем обработчике запросов Ajax. 

            jQuery.post(urlPrefix + "/api/ReportData",
                    dataToPost,
                    function (data, status) {

                        var blob = new Blob([data], { type: "text/csv" });
                        var fileName = "";
                        fileName += "Data-Export";
                        fileName += ".csv";
                        saveAs(blob, fileName);

                    });

Этот код вызывается из события нажатия кнопки. Всякий раз, когда код выполняется, открывается новая вкладка, и файл сохраняется без расширения CSV. На самом деле, загруженный файл не имеет расширения вообще. Смотрите прикрепленный скриншот для деталей. (7) связано с тем, что это моя седьмая загрузка.

Фактический сохраненный файл является допустимым файлом. Если я вручную установлю его расширение на csv, я смогу использовать его правильно. Но я хочу знать, как использовать FileSaver для создания соответствующего расширения, а также загрузить файл, не открывая новую вкладку.

enter image description here

Что я уже пробовал

  1. Экспорт в CSV с использованием jQuery и html

1 Ответ

0 голосов
/ 25 апреля 2020

Я обнаружил эту ссылку https://code-maven.com/create-and-download-csv-with-javascript, где можно создать скрытый тег привязки и загрузить файл.

Мой новый код указан ниже 

jQuery.post(urlPrefix + "/api/ReportData",
                    dataToPost,
                    function (data, status) {

                        var hiddenElement = document.createElement('a');
                        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(data);
                        hiddenElement.target = '_blank';
                        hiddenElement.download = 'Exported-Data.csv';
                        hiddenElement.id = "customTemporaryAnchor";
                        hiddenElement.click();

                        jQuery("#customTemporaryAnchor").remove();

});

Когда этот код выполняется, файл загружается с правильным расширением, без всплывающего окна или новой вкладки.

...