URL del PDF usado en clase
https://young-sands-07814.herokuapp.com/api/files/dummy.pdf
Para los curiosos, aquà el anterior (14 hojas)
https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf
Http Basic
Lo que aprenderás para consumir API con Angular
Solicitudes GET
Detalle de producto
Implementando slides
Solicitudes POST
Solicitudes PUT y PATCH
Solicitudes DELETE
Url Parameters / Paginación
Observable vs. Promesa
Reintentar una petición
Buenas prácticas
El problema de CORS
Manejo de ambientes
Manejo de errores
Transformar peticiones
Evitando el callback hell
Auth
Login y manejo de Auth
Manejo de headers
Uso de interceptores
Enviar Token con un interceptor
Creando un contexto a interceptor
Archivos
Descarga de archivos con Http
Subida de archivos con Http
Despedida
Continúa con el Curso de Angular Router y Programación Modular
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Una necesidad muy común desde un front-end es la descarga de archivos provenientes de un servidor. Veamos cómo puedes manipular este tipo de información y lograr que el usuario pueda descargar un archivo.
Los datos se transladan en forma binaria a través del canal de comunicación HTTP. Vamos a recibir dichos datos binarios y a manipularlos para crear el archivo.
Comienza creando un servicio para realizar peticiones y manipular archivos.
// services/files.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class FilesService {
constructor() { }
getFile(urlFile: string): Promise<any> {
return fetch(urlFile, {
method: 'GET',
});
}
}
En el método getFile()
hace un fetch a una URL para obtener el Buffer del archivo.
Un Buffer es un espacio en la memoria que almacena datos binarios. En NodeJS, es posible acceder a estos espacios de memoria con la clase Buffer. Los búferes almacenan una secuencia de enteros, de forma similar a una matriz en Javascript. Del lado del front-end, es posible recibir un búfer de datos y manipularlo para convertirlo en un PDF, un XLS, entre otros.
Al realizar la solicitud y recibir el Buffer, lo convertimos en Blob para posteriormente creamos una URL temporal con URL.createObjectURL()
pasándole dicho Blob y abriendo una nueva pestaña utilizando window.open()
en el navegador.
openFile(): void {
this.filesService.getFile('../../../assets/dummy.pdf')
.then(response => response.blob())
.then(pdf => {
window.open(URL.createObjectURL(pdf), '_blank');
})
.catch(err => {
console.log(err);
});
}
La manipulación de archivos es esencial, cada navegador interpreta los tipos de datos de una manera distinta. Es común encontrarse con comportamientos distintos en cada navegador como por ejemplo, Chrome suele descargar directamente el archivo, mientras que Firefox lo abre en una nueva pestaña. Dependiendo tu necesidad, asegúrate de probar tu aplicación en varios navegadores diferentes.
Contribución creada por: Kevin Fiorentino.
Aportes 6
Preguntas 1
URL del PDF usado en clase
https://young-sands-07814.herokuapp.com/api/files/dummy.pdf
Para los curiosos, aquà el anterior (14 hojas)
https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf
Para quienes (como yo) no lo sabÃan, blob es un objeto tipo fichero de datos planos inmutables. Los Blobs representan datos que no necesariamente se encuentran en un formato nativo de JavaScript. La interfaz File se encuentra basada en un Blob, heredando y expendiendo la funcionalidad de un Blob para soportar archivos en el sistema del usuario.
librerÃa
npm i file-saver
tipado
npm install @types/file-saver --save-dev
Bueno algo interesante cuando intente descargalor normalmente me paso que pum!! eror de CORS pero dije no yo se resolver esto entonces ni lento ni peresoso…
Funcion:
downloadPdf(){
this.filesService.getfile('my.pdf', '/pdf.js/web/compressed.tracemonkey-pldi-09.pdf', 'application/pdf')
.subscribe()
}
Proxy:
{
"/api/*": {
"target": "https://young-sands-07814.herokuapp.com",
"secure": true,
"logLevel": "debug",
"changeOrigin": true
},
"/pdf.js/web/*": {
"target": "https://mozilla.github.io",
"secure": true,
"logLevel": "debug",
"changeOrigin": true
}
}
y listo…
Siempre tengo problemas descargando archivos desde un S3 porque Chrome te lo descarga directamente y Firefox te lo abre en una nueva ventana. Lo que suelo hacer es capturar el Buffer del PDF, convertirlo en Blob y con el objeto window
abrirlo en una nueva pestaña, en el caso de no querer descargarlo.
Nunca pude hacerlo con el HttpClient de Angular, Gracias Nicolas!
getPDF(): Promise<any> {
return fetch(`url/to/pdf`),
{
method: 'GET',
});
}
openPDF(): void {
this.getPDF()
.then(response => response.blob())
.then(pdf => {
if (pdf) {
window.open(URL.createObjectURL(pdf), '_blank');
}
})
.catch(err => {
console.log(err);
});
}
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. RegÃstrate o inicia sesión para participar.