Загрузка файла Angular 2: поврежденный результат

Я пытаюсь загрузить файл, используя Angular 2 / TypeScript и Web API. Проблема, с которой я сталкиваюсь, заключается в том, что при загрузке текстового файла файл является файлом, но при попытке загрузить файл PDF, например, он поврежден. Содержимое скачанного файла ерунда ерунда.

TypeScript, который я использую, выглядит следующим образом:

downloadFile(fileId: string): Observable<File> {
    this.applicationsUrl = `${APIConfig.BaseUrl}/documents/download/${fileId}/`;

    let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.applicationsUrl, '', options)
        .map(this.extractContent)
        .catch(this.handleError);
}

private extractContent(res: any) {
    let blob: Blob = new Blob([res._body], { type: 'application/pdf'});
    window['saveAs'](blob, 'test.pdf');
}

Окно ['saveAs'] - это просто обходной путь для доступа к функциям JavaScript FileSaver.js.

Кроме того, я установил res: Response для res: any, чтобы я мог получить доступ к свойству private _body в JavaScript без сбоя компиляции в TypeScript.

Любая помощь будет принята с благодарностью.

Ответы на вопрос(2)

и нам пришлось настроить конвертер сообщений на стороне пружины. Ниже приведен фрагмент кода из конфигурационного файла Spring:

    @Override
     public void configureMessageConverters(List<HttpMessageConverter<?>> 
         converters) {
    //Here we add our custom-configured HttpMessageConverter
   /* Message converter for supporting Hibernate lazy objects */
    converters.add(jacksonMessageConverter());
    converters.add(byteArrayHttpMessageConverter());
    super.configureMessageConverters(converters);
}

    public ByteArrayHttpMessageConverter byteArrayHttpMessageConverter() {
    ByteArrayHttpMessageConverter arrayHttpMessageConverter = new ByteArrayHttpMessageConverter();
    arrayHttpMessageConverter.setSupportedMediaTypes(getSupportedMediaTypes());
    return arrayHttpMessageConverter;
} 

private List<MediaType> getSupportedMediaTypes() {
    List<MediaType> list = new ArrayList<MediaType>();
    list.add(MediaType.APPLICATION_OCTET_STREAM);
    list.add(MediaType.parseMediaType("application/pdf"));
    return list;
}

Более подробную информацию о настройке конвертеров сообщений можно найти здесь: -http://www.baeldung.com/spring-httpmessageconverter-rest

Вам все еще нужно добавить заголовок «Принять» в запросе, как ответил Крис. Это поможет сопоставить ответ с соответствующим конвертером сообщений, настроенным на стороне пружины.

 java dev20 апр. 2018 г., 23:19
Это может быть слишком поздно, но может принести пользу кому-то еще!
Решение Вопроса

downloadFile(fileId: string): Observable<File> {
this.applicationsUrl = `${APIConfig.BaseUrl}/documents/download/${fileId}/`;

let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' });
let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });

return this.http.post(this.applicationsUrl, '', options)
    .map(this.extractContent)
    .catch(this.handleError);
}

private extractContent(res: Response) {
    let blob: Blob = res.blob();
    window['saveAs'](blob, 'test.pdf');
}

У меня была похожая проблема и установка заголовка Accept наapplication/pdf, responseType toBlob и доступ к BLOB-объекту через соответствующий метод в Response решил эту проблему для меня :) (я тоже использую FileSaver)

 Parth Chokshi16 февр. 2017 г., 21:35
Как вы используете FileSaver? Можете ли вы привести пример использования его в Typescript?

Ваш ответ на вопрос