change - Angular 2 descarga PDF desde la API y lo muestra en vista

router events subscribe angular 4

Question

Estoy aprendiendo Angular 2 Beta. Me pregunto cómo descargar el archivo PDF desde la API y mostrarlo en mi vista. He intentado hacer una solicitud utilizando lo siguiente:

 var headers = new Headers();
headers.append(''Accept'', ''application/pdf'');
var options = new ResponseOptions({
headers: headers
});
var response = new Response(options);
this.http.get(this.setUrl(endpoint), response).map(res => res.arrayBuffer()).subscribe(r=>{
console.log(r);
})

• Tenga en cuenta que solo uso console.log para ver el valor de r

Pero siempre recibo el siguiente mensaje de excepción:

El método "arrayBuffer ()" no se implementó en la superclase de respuesta

¿Es porque ese método aún no está listo en Angular 2 Beta? ¿O hay algún error que haya cometido?

Cualquier ayuda sería apreciada. Muchas gracias.

Answer 1

Aquí está el código que funciona para descargar la respuesta de la API en IE y chrome / safari. Aquí la variable de respuesta es la respuesta API.

Nota: la llamada http del cliente debe admitir la respuesta de blob.

 let blob = new Blob([response], {type: ''application/pdf''});
let fileUrl = window.URL.createObjectURL(blob);
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, fileUrl.split('':'')[1] + ''.pdf'');
} else {
window.open(fileUrl);
}

Answer 2

Así que aquí es cómo me las arreglé para hacerlo funcionar. Mi situación: necesitaba descargar un PDF desde mi punto final de API y guardar el resultado como un PDF en el navegador.

Para admitir el guardado de archivos en todos los navegadores, usé el módulo FileSaver.js .

Creé un componente que toma la ID del archivo para descargar como parámetro. El componente, , se llama así:

<pdf-downloader no="24234232"></pdf-downloader>

El componente en sí utiliza XHR para recuperar / guardar el archivo con el número indicado en el parámetro no . De esta manera podemos evitar el hecho de que el módulo http de Angular2 aún no admite tipos de resultados binarios.

Y ahora, sin más dilación, el código componente:

 import {Component,Input } from ''angular2/core'';
import {BrowserXhr} from ''angular2/http'';
// Use Filesaver.js to save binary to file
// https://github.com/eligrey/FileSaver.js/
let fileSaver = require(''filesaver.js'');
@Component({
selector: ''pdf-downloader'',
template: `
<button
class="btn btn-secondary-outline btn-sm "
(click)="download()">
<span class="fa fa-download" *ngIf="!pending"></span>
<span class="fa fa-refresh fa-spin" *ngIf="pending"></span>
</button>
`
})
export class PdfDownloader {
@Input() no: any;
public pending:boolean = false;
constructor() {}
public download() {
// Xhr creates new context so we need to create reference to this
let self = this;
// Status flag used in the template.
this.pending = true;
// Create the Xhr request object
let xhr = new XMLHttpRequest();
let url = `/api/pdf/iticket/${this.no}?lang=en`;
xhr.open(''GET'', url, true);
xhr.responseType = ''blob'';
// Xhr callback when we get a result back
// We are not using arrow function because we need the ''this'' context
xhr.onreadystatechange = function() {
// We use setTimeout to trigger change detection in Zones
setTimeout( () => { self.pending = false; }, 0);
// If we get an HTTP status OK (200), save the file using fileSaver
if(xhr.readyState === 4 && xhr.status === 200) {
var blob = new Blob([this.response], {type: ''application/pdf''});
fileSaver.saveAs(blob, ''Report.pdf'');
}
};
// Start the Ajax request
xhr.send();
}
}

He usado Font Awesome para las fuentes usadas en la plantilla. Quería que el componente mostrara un botón de descarga y un girador mientras se busca el pdf.

Además, tenga en cuenta que podría usar require para recuperar el módulo fileSaver.js. Esto se debe a que estoy usando WebPack, por lo que puedo requerir / importar como quiera. Su sintaxis puede ser diferente dependiendo de su herramienta de construcción.

Answer 3

De hecho, esta característica aún no está implementada en el soporte HTTP.

Como solución alternativa, debe ampliar la clase de Angular2 de BrowserXhr como se describe a continuación para establecer responseType en blob en el objeto xhr subyacente:

import {Injectable} from ''angular2/core'';
import {BrowserXhr} from ''angular2/http'';
@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
constructor() {}
build(): any {
let xhr = super.build();
xhr.responseType = "blob";
return <any>(xhr);
}
}

Luego, debe ajustar la carga útil de respuesta en un objeto Blob y usar la biblioteca FileSaver para abrir el cuadro de diálogo de descarga:

downloadFile() {
this.http.get(
''https://mapapi.apispark.net/v1/images/Granizo.pdf'').subscribe(
(response) => {
var mediaType = ''application/pdf'';
var blob = new Blob([response._body], {type: mediaType});
var filename = ''test.pdf'';
saveAs(blob, filename);
});
}

La biblioteca de FileSaver debe incluirse en su archivo HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

Ver este plunkr: http://plnkr.co/edit/tfpS9k2YOO1bMgXBky5Y?p=preview

Desafortunadamente, esto establecerá el tipo de responseType para todas las solicitudes AJAX. Para poder establecer el valor de esta propiedad, hay más actualizaciones que hacer en las clases XHRConnection y Http .

Como referencias ver estos enlaces:

• Descargar archivo pdf usando jquery ajax
• Recibir archivo zip, angularJs

Editar

Después de pensar un poco más, creo que podría aprovechar los inyectores jerárquicos y configurar este proveedor solo al nivel del componente que ejecuta la descarga:

@Component({
selector: ''download'',
template: ''<div (click)="downloadFile() ">Download</div>''
, providers: [
provide(CustomBrowserXhr,
{ useClass: CustomBrowserXhr }
]
})
export class DownloadComponent {
@Input()
filename:string;
constructor(private http:Http) {
}
downloadFile() {
this.http.get(
''https://mapapi.apispark.net/v1/images/''+this.filename).subscribe(
(response) => {
var mediaType = ''application/pdf'';
var blob = new Blob([response._body], {type: mediaType});
var filename = ''test.pdf'';
saveAs(blob, filename);
});
}
}

Esta anulación solo se aplicaría a este componente (no olvide eliminar la provisión correspondiente al iniciar su aplicación). El componente de descarga podría ser usado así:

@Component({
selector: ''somecomponent'',
template: `
<download filename="''Granizo.pdf''"></download>
`
, directives: [ DownloadComponent ]
})

Answer 4

Esta es la forma más sencilla de descargar un archivo desde una API que pude encontrar.

import { Injectable } from ''@angular/core'';
import { Http, ResponseContentType } from "@angular/http";
import * as FileSaver from ''file-saver'';
@Injectable()
export class FileDownloadService {
constructor(private http: Http) { }
downloadFile(api: string, fileName: string) {
this.http.get(api, { responseType: ''blob'' })
.subscribe((file: Blob) => {
FileSaver.saveAs(file, fileName);
});
}
}

Llame al método downloadFile(api,fileName) desde su clase de componente.

Para obtener FileSaver ejecute los siguientes comandos en su terminal

npm install file-saver --save
npm install @types/file-saver --save

Answer 5

No creo que todos estos hacks sean necesarios. Acabo de hacer una prueba rápida con el servicio http estándar en angular 2.0 y funcionó como se esperaba.

/* generic download mechanism */
public download(url: string, data: Object = null): Observable<Response> {
//if custom headers are required, add them here
let headers = new Headers();
//add search parameters, if any
let params = new URLSearchParams();
if (data) {
for (let key in data) {
params.set(key, data[key]);
}
}
//create an instance of requestOptions
let requestOptions = new RequestOptions({
headers: headers,
search: params
});
//any other requestOptions
requestOptions.method = RequestMethod.Get;
requestOptions.url = url;
requestOptions.responseType = ResponseContentType.Blob;
//create a generic request object with the above requestOptions
let request = new Request(requestOptions);
//get the file
return this.http.request(request)
.catch(err => {
/* handle errors */
});
}
/* downloads a csv report file generated on the server based on search criteria specified. Save using fileSaver.js. */
downloadSomethingSpecifc(searchCriteria: SearchCriteria): void {
download(this.url, searchCriteria)
.subscribe(
response => {
let file = response.blob();
console.log(file.size + " bytes file downloaded. File type: ", file.type);
saveAs(file, ''myCSV_Report.csv'');
},
error => { /* handle errors */ }
);
}

Answer 6

Para que Filesaver funcione en Angular 5: Instalar

npm install file-saver --save
npm install @types/file-saver --save

En su componente use import * as FileSaver from "file-saver";

y use FileSaver. por defecto y no FileSaver. Guardar como

.subscribe(data => {
const blob = data.data;
const filename = "filename.txt";
FileSaver.default(blob, filename);

Answer 7

Hola , aquí hay un ejemplo de trabajo . También es adecuado para PDF! application / octet-stream - tipo general. Controlador:

public FileResult exportExcelTest()
{
var contentType = "application/octet-stream";
HttpContext.Response.ContentType = contentType;
RealisationsReportExcell reportExcell = new RealisationsReportExcell();
byte[] filedata = reportExcell.RunSample1();
FileContentResult result = new FileContentResult(filedata, contentType)
{
FileDownloadName = "report.xlsx"
};
return result;
}

Angular2:

Servicio xhr:

import { Injectable } from ''@angular/core'';
import { BrowserXhr } from ''@angular/http'';
@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
constructor() {
super();
}
public build(): any {
let xhr = super.build();
xhr.responseType = "blob";
return <any>(xhr);
}
}

Instale los paquetes de npm para el protector de archivos "file-saver": "^ 1.3.3", "@ types / file-saver": "0.0.0" e incluya en vendor.ts import ''file-saver'';

Descarga de componentes btn.

import { Component, OnInit, Input } from "@angular/core";
import { Http, ResponseContentType } from ''@angular/http'';
import { CustomBrowserXhr } from ''../services/customBrowserXhr.service'';
import * as FileSaver from ''file-saver'';
@Component({
selector: ''download-btn'',
template: ''<button type="button" (click)="downloadFile()">Download</button>'',
providers: [
{ provide: CustomBrowserXhr, useClass: CustomBrowserXhr }
]
})
export class DownloadComponent {
@Input() api: string;
constructor(private http: Http) {
}
public downloadFile() {
return this.http.get(this.api, { responseType: ResponseContentType.Blob })
.subscribe(
(res: any) =>
{
let blob = res.blob();
let filename = ''report.xlsx'';
FileSaver.saveAs(blob, filename);
}
);
}
}

Utilizando

<download-btn api="api/realisations/realisationsExcel"></download-btn>