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:
- Как использовать плагин jQuery с угловым 4?
- Динамический стильUrls в угловом 2?
- Интеграция дизайна материалов Lite с помощью Angular2
- Как скрыть элемент при прокрутке страницы?
- Angularjs: Служба, которая обслуживает несколько URL-адресов ресурсов / источников данных?
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 открывается, но содержимое не отображается. благодаря
- Использование ui-router с Bootstrap-ui modal
- Прокси-сервер с угловым CLI для бэкэнд не работает
- В Angular, как вы определяете активный маршрут?
- Когда я обновляю свой сайт, я получаю 404. Это с Angular2 и firebase
- Angular2 SEO - Как сделать угловое приложение с возможностью сканирования 2
- Как импортировать угловой материал в проект?
- Угловая 4: Как включить Bootstrap?
- Угловая привязка HTML
У меня было много проблем с загрузкой и показом содержимого 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 может быть счетчиком или моей личной любимой строкой времени даты.