Angular - загрузка файла не работает в Edge - PullRequest
Новая
       36

Angular - загрузка файла не работает в Edge

1 голос
/ 04 июля 2019

У меня есть приложение Angular 7, которое вызывает функцию ASP.NET Web API, которая возвращает данные в форме .xlsx файла Excel обратно в Angular.

Используя этот код, я затем создаю невидимый тег <a> и щелкаю его, чтобы начать загрузку этого двоичного файла на клиент: 

this.reportService.createReport(this.reportOption,
    (data) => {
        const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });

        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        document.body.appendChild(a);

        a.setAttribute('style', 'display: none');
        a.href = url;
        a.download = fileName;
        a.click();

        window.URL.revokeObjectURL(url);
        a.remove();
    },
    (error: string) => {
        this.messsageService.showError(error);
    });

Этот код работает безупречно в Firefox и Chrome - никаких проблем.

Но в MS Edge по какой-то причине загрузка не началась. Я не вижу никаких ошибок в консоли Javascript, там просто написано «Загрузка успешно запущена» - но пользователю не предлагается указать, где сохранить файл - и файл также не загружается в сконфигурированном каталоге загрузки по умолчанию .

Есть идеи? Кто-нибудь еще видел это с Edge и нашел для этого решение?

1 Ответ

1 голос
/ 05 июля 2019

В браузере IE / Microsoft Edge вы можете использовать метод msSaveOrOpenBlob для загрузки файла.Пожалуйста, попробуйте изменить ваш код, как показано ниже: 

//change to your format.
var blob = new Blob([byteArray], { type: 'application/pdf' });
//output file name
var fileName = "test.pdf";

//detect whether the browser is IE/Edge or another browser
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  //To IE or Edge browser, using msSaveorOpenBlob method to download file.
  window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
    //To another browser, create a tag to downlad file.
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display: none');
    a.href = url;
    a.download = fileName;
    a.click();

    window.URL.revokeObjectURL(url);
    a.remove();
}
...