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:
- Свойство 'map' не существует в типе 'Observable '
- Угловой 2 Используйте компонент из другого модуля
- Миграция AngularJS в Angular 4,5 (с DEMO)
- Как я могу получить новый выбор в «select» в Angular 2?
- В Angular, как вы определяете активный маршрут?
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 открывается, но содержимое не отображается. благодаря
- Как использовать плагин jQuery с угловым 4?
- угловая ng-init альтернатива в угловом 2
- Угловые 2 входных параметра по корневой директиве
- Angular2 http.post выполняется дважды
- Как правильно обновить угловую 2 (npm) до последней версии?
- Угловое 2: Как обнаружить изменения в массиве? (свойство @input)
- Угловой 2 http.post () не отправляет запрос
- Как динамически загружать внешние скрипты в Angular?
У меня было много проблем с загрузкой и показом содержимого 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); } }
Ссылка на приведенную ниже ссылку
Amit, вы можете переименовать имя файла, добавив переменную в конец строки, так что saveAs(res, "myPDF.pdf");
становится
saveAs(res, "myPDF_"+someVariable+".pdf");
где someVariable может быть счетчиком или моей личной любимой строкой времени даты.