JavaScript Academy · Lección

Blobs y URL de objetos

Cree y use URL de blobs para las descargas.

Blobs y URL de objetos es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es un Blob?

Un Blob (Binary Large Object) representa datos sin procesar e inmutables, como el contenido de un archivo, en memoria. Los archivos son un tipo especial de Blob que incluye un nombre y una fecha de modificación.

Los Blobs permiten crear, dividir y descargar datos binarios en el navegador.

Creación de un Blob

Construya un Blob a partir de un array de partes (cadenas, búferes u otros Blobs) y un objeto de opciones que especifique el tipo MIME type.

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(blob.size);
console.log(blob.type);

Blob a partir de varias partes

El array de partes se concatena en el orden indicado. Puede combinar cadenas y arrays tipados.

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

Lectura de un Blob

Los Blobs ofrecen métodos basados en Promise, text(), arrayBuffer() y stream(), para leer su contenido.

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

División de un Blob

blob.slice(start, end) devuelve un Blob nuevo que cubre una parte del original sin copiarlo por completo. Resulta útil para cargas por fragmentos.

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

Creación de una URL de objeto

URL.createObjectURL(blob) devuelve una URL de corta duración que apunta al Blob en memoria. Puede usarla como img.src, como href de un enlace o como fuente de un vídeo.

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

Previsualización de una imagen cargada

Convierta un archivo seleccionado en una URL de objeto y asígnela a un elemento de imagen para mostrar una vista previa al instante, sin necesidad de una solicitud al servidor.

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

Activación de una descarga

Cree un Blob, genere una URL de objeto y haga clic en un elemento anchor temporal con un atributo download para guardar un archivo generado.

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

Revocación de URL de objeto

Las URL de objeto mantienen el Blob en memoria hasta que llama a URL.revokeObjectURL(url). Revoque siempre la URL cuando termine para evitar fugas de memoria.

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

Blobs y JSON

Puede crear un archivo JSON descargable convirtiendo los datos en una cadena dentro de un Blob con el tipo MIME correcto.

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

Por qué son importantes los Blobs

Los Blobs y las URL de objeto permiten gestionar datos binarios completamente en el cliente: previsualizar cargas, generar descargas y dividir archivos grandes en fragmentos. Recuerde revocar las URL cuando termine. A continuación, enviará archivos a un servidor con fetch.

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

Comprobación rápida

Después de usar una URL de objeto para una descarga, ¿qué debe llamar para liberar memoria?

Repaso: Blobs y URL de objeto

Ha aprendido a gestionar datos binarios:

new Blob(parts, { type }) crea datos binarios inmutables.
Léalos con text() y arrayBuffer(); divídalos con slice().
URL.createObjectURL crea una URL blob: utilizable para vistas previas y descargas.
Llame siempre a URL.revokeObjectURL cuando termine para liberar memoria.

Preguntas frecuentes

¿La lección «Blobs y URL de objetos» es gratis?

Sí — el texto completo de «Blobs y URL de objetos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Blobs y URL de objetos»?

Cree y use URL de blobs para las descargas. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Blobs y URL de objetos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy