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 открывается, но содержимое не отображается. Благодаря

Ответы

Ответ 1

У меня было много проблем с загрузкой и показом содержимого 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

        }
    );

Примечание

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

Ответ 2

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

Становится

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

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