PDF Blob не показывает контент, Angular 2

У меня проблема очень похожа на этот PDF Blob – Всплывающее окно, не показывающее контент , но я использую Angular 2. Ответ на вопрос состоял в том, чтобы установить responseType в arrayBuffer, но он не работает в Angular 2, ошибка – это reponseType не существуют в типе RequestOptionsArgs. Я также попытался расширить его BrowserXhr, но все равно не работает ( https://github.com/angular/http/issues/83 ).

Мой код:

createPDF(customerServiceId: string) { console.log("Sending GET on " + this.getPDFUrl + "/" + customerServiceId); this._http.get(this.getPDFUrl + '/' + customerServiceId).subscribe( (data) => { this.handleResponse(data); }); } 

И метод handleResponse:

 handleResponse(data: any) { console.log("[Receipt service] GET PDF byte array " + JSON.stringify(data)); var file = new Blob([data._body], { type: 'application/pdf' }); var fileURL = URL.createObjectURL(file); window.open(fileURL); } 

Я также попытался сохранить метод As из FileSaver.js, но это та же проблема, PDF открывается, но содержимое не отображается. благодаря

У меня было много проблем с загрузкой и показом содержимого PDF, я, вероятно, потратил день или два на его исправление, поэтому опубликую рабочий пример того, как успешно загрузить PDF или открыть его на новой вкладке:

myService.ts

 downloadPDF(): any { return this._http.get(url, { responseType: ResponseContentType.Blob }).map( (res) => { return new Blob([res.blob()], { type: 'application/pdf' }) } } 

myComponent.ts

 this.myService.downloadPDF().subscribe( (res) => { saveAs(res, "myPDF.pdf"); //if you want to save it - you need file-saver for this : https://www.npmjs.com/package/file-saver var fileURL = URL.createObjectURL(res); window.open(fileURL); / if you want to open it in new tab } ); 

ЗАМЕТКА

Также стоит отметить, что если вы расширяете class Http для добавления headers во все ваши запросы или что-то в этом роде, это также может создавать проблемы для загрузки PDF, поскольку вы переопределяете RequestOptions , в котором мы добавляем responseType: ResponseContentType.Blob и это получит вас The request body isn't either a blob or an array buffer ошибкой The request body isn't either a blob or an array buffer .

УГЛОВЫЕ 5

У меня была та же проблема, что я потерял несколько дней на этом.

Здесь мой ответ может помочь другим, которые помогли сделать pdf.

Для меня, даже если я упоминаю в качестве responseType: «arraybuffer», он не смог его принять.

Для этого вам нужно указать в качестве responseType: ‘arraybuffer’ как ‘json’. ( Ссылка )

Рабочий код

 downloadPDF(): any { return this._http.get(url, { responseType: 'blob' as 'json' }).subscribe((res) => { var file = new Blob([res], { type: 'application/pdf' }); var fileURL = URL.createObjectURL(file); window.open(fileURL); } } 

Ссылка на приведенную ниже ссылку

https://github.com/angular/angular/issues/18586

Amit, вы можете переименовать имя файла, добавив переменную в конец строки, так что saveAs(res, "myPDF.pdf");

становится

 saveAs(res, "myPDF_"+someVariable+".pdf"); 

где someVariable может быть счетчиком или моей личной любимой строкой времени даты.

  • Как сделать HTTP-запросы с поддержкой CORS в Angular 2?
  • Динамически загружать HTML-шаблон в angular2
  • Как реализовать Modal Dialog в Angular 2 и выше
  • Импорт lodash в приложение углового2 +
  • Разница между HTTP и HTTPClient в угловом 4?
  • Как добавить шрифт-awesome в проект Angular 2 + CLI
  • Angular / RxJs Когда я должен отказаться от подписки на `Subscription`
  • Рабочий пример углового материала 2.0 MdDialog с угловым 2,0
  • В чем разница между декларациями, поставщиками и импортом в NgModule
  • rxjs / Subject.d.ts error: Class 'Subject ' неправильно расширяет базовый class 'Observable '
  • App.settings - Угловой способ?
  • Давайте будем гением компьютера.