Как экспортировать и загрузить данные в допустимый формат xlsx на стороне клиента? - PullRequest
Новая
       17

Как экспортировать и загрузить данные в допустимый формат xlsx на стороне клиента?

2 голосов
/ 20 октября 2019

Из серверного API я получаю список данных учеников в действительный файл Excel, который загружается при попадании в конечную точку /api/v1.0/students/students-xlsx/ Но на стороне клиента, когда я звонюэта конечная точка показывает нечитаемый формат и загружается как испорченный файл Excel.

Я следовал некоторым советам по переполнению стека, таким как atob, кодировал данные ответа и добавлял определенный тип (UTF-8), но это не удалось. Тем не менее я получаю испорченный файл со странными символами. 

excelFileDownload() {
  this.$http.get(this.exportXLUrl)
    .then((response) => {
      response.blob().then(() => {
        const blob = new Blob([response.body], { type: response.headers.get('content-type') });
        const filename = response.headers.map['content-disposition'][0].split('filename=')[1];
        const link = document.getElementById('download-excel-file');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename.split('"').join('');
        link.style.display = 'block';
        link.click();
      });
    });
},

Я ожидаю, что вывод будет таким же, как когда я просто использую браузерный API для вызова конечной точки, что дает мне соответствующий файл формата xls с читаемыми символами. Но на стороне клиента я этого не понимаю. Это все сломано. Любая помощь будет полезна для улучшения моего кода.

Ответы [ 2 ]

0 голосов
/ 22 октября 2019

Мне нужно передать Content-type в заголовках и responseType с запросом get, как показано ниже: 

headers: { 'Content-Type': 'application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet' },
responseType: 'arraybuffer'

Теперь все работает нормально.

0 голосов
/ 21 октября 2019

Если вы хотите использовать XMLHttpRequest

(не проверено) 

const xhr = new XMLHttpRequest();
xhr.open('GET', this.exportXLUrl, true);
xhr.responseType = 'blob';

xhr.addEventListener('load', () =>
{
    if(xhr.status == 200)
    {
        const url = window.URL.createObjectURL(xhr.response);

        const contentDisposition = xhr.getResponseHeader('content-disposition');
        const filename = /filename=([^;]*)/.exec(contentDisposition)[1];

        const link = document.getElementById('download-excel-file');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename.split('"').join('');
        link.style.display = 'block';
        link.click();

        //Dont forget to revoke it
        window.URL.revokeObjectURL(url);
    }
    else
    {
        //error
    }
});

xhr.addEventListener('error', err =>
{
    //error
});

xhr.send();
...