Загрузка xlsx файла в angular 2 с помощью blob

Я хочу загрузить файл xlsx с клиента на angular 2, используя rest api.

Я получаю байтовый массив как ответ от моего запроса GET, и я отправляю его для загрузки с подпиской:

let options = new RequestOptions({ search: params });
this.http.get(this.restUrl, options)
          .subscribe(this.download);

функция загрузки с помощью blob:

download(res: Response) {
let data = new Blob([res.arrayBuffer()], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });
FileSaver.saveAs(data, this.fileName);};

моя проблема в том, что мой файл постоянно поврежден. Я пробовал много версий этого, но ничего не работает.

** также попробовал его с этим решением, и он не работает (файл xlsx по-прежнему поврежден) - Angular 2 загрузка файла: поврежденный результат, разница в том, что мои данные являются буфером массива, а не строкой или json, и существует разница между PDF и xlsx.

10x!

Ответы

Ответ 1

После того, как ничего не работает. Я изменил свой сервер, чтобы вернуть тот же массив байтов с добавлением:

    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    response.setHeader("Content-Disposition", "attachment; filename=deployment-definitions.xlsx");

На моем клиенте я удалил функцию загрузки, а вместо части GET я сделал:

window.open(this.restUrl, "_blank");

Это единственный способ найти файл xlsx, который не поврежден.

Если у вас есть ответ о том, как это сделать с помощью blob, скажите мне:)

Ответ 2

У меня была такая же проблема, как у вас - исправил ее, добавив responseType: ResponseContentType.Blob к моим параметрам Get. Проверьте код ниже:

public getReport(filters: ReportOptions) {
    return this.http.get(this.url, {
            headers: this.headers,
            params: filters,
            responseType: ResponseContentType.Blob
        })
        .toPromise()
        .then(response => this.saveAsBlob(response))
        .catch(error => this.handleError(error));
}

SaveAsBlob() - это просто оболочка для FileSaver.SaveAs():

private saveAsBlob(data: any) {
    const blob = new Blob([data._body],
        { type: 'application/vnd.ms-excel' });
    const file = new File([blob], 'report.xlsx',
        { type: 'application/vnd.ms-excel' });

    FileSaver.saveAs(file);
}

Ответ 3

вы можете использовать приведенный ниже код:

var file = new Blob([data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
});
saveAs(file,"nameFile"+".xlsx");
deferred.resolve(data);

Ответ 4

Следующее решение работало для меня в Google Chrome версии 58.0.3029.110 (64-разрядная версия).

Это статья, объясняющая, как загрузить pdf с помощью Blob: https://brmorris.blogspot.ie/2017/02/download-pdf-in-angular-2.html

Это тот же принцип для файла xlsx. Просто выполните шаги из статьи и измените две вещи:

  • Вместо {'Accept': 'application/pdf'} используйте {'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'};
  • Blob, используйте тот же тип для создания вашего Blob, нового Blob ([fileBlob], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}).

В статье используется File Saver, но я этого не сделал. Я оставил комментарий в статье с основным объяснением того, что я использовал вместо File Saver.

Ответ 5

Вот решение, поддерживающее браузеры IE и Chrome/Safari. Здесь объектом "ответ" является ответ, полученный от службы. У меня это работает для архива. Вы можете изменить тип в соответствии с ответом, полученным от службы.

    let blob = new Blob([response], {type: 'application/zip'});
    let fileUrl = window.URL.createObjectURL(blob);
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.zip');
    } else {
        this.reportDownloadName = fileUrl;
        window.open(fileUrl);
    }

Ответ 6

Для меня проблема заключалась в том, что мой responseType был "текстовым". Вместо этого мне нужно было использовать "blob"; У меня работает на Angular 7.2.15.