JavaScript Academy · Lektion

Blobs og objekt-URL'er

Opret og brug blob-URL'er til downloads.

Lektion 3 af 413 trin

Blobs og objekt-URL'er er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad er en Blob?

En Blob (binært stort objekt) repræsenterer uforanderlige rå data, f.eks. filindhold, i hukommelsen. Filer er en særlig type Blob med et navn og en ændringsdato.

Blobs lader dig opbygge, opdele og downloade binære data i browseren.

Oprettelse af en Blob

Opret en Blob ud fra et array af dele (strenge, buffere og andre Blobs) samt et indstillingsobjekt, der angiver MIME-type.

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

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

Blob fra flere dele

Arrayet med dele sammenkædes i rækkefølge. Du kan blande strenge og typede arrays.

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

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

Læsning af en Blob

Blobs stiller Promise-baserede metoderne text(), arrayBuffer() og stream() til rådighed, så du kan læse deres indhold.

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

show();

Opdeling af en Blob

blob.slice(start, end) returnerer en ny Blob, der dækker en del af den oprindelige, uden at kopiere det hele. Det er nyttigt til filoverførsler i dele.

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

console.log(chunk.size);

Oprettelse af en objekt-URL

URL.createObjectURL(blob) returnerer en kortlivet URL, der peger på Blob-objektet i hukommelsen. Du kan bruge den som img.src, som et links href eller som en videokilde.

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

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

Forhåndsvisning af et uploadet billede

Lav en valgt fil om til en objekt-URL, og tildel den til et imagelement for at få en øjeblikkelig forhåndsvisning uden en tur til serveren.

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

console.log('preview ready');

Udløsning af en download

Opret en Blob, lav en objekt-URL, og klik på et midlertidigt ankerelement med attributten download for at gemme en genereret fil.

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');

Tilbagekaldelse af objekt-URL'er

Objekt-URL'er holder Blob-objektet i hukommelsen, indtil du kalder URL.revokeObjectURL(url). Tilbagekald altid URL'en, når du er færdig, for at undgå hukommelseslækager.

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

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

Blobs og JSON

Du kan oprette en JSON-fil, der kan downloades, ved at serialisere data til en Blob med den korrekte MIME-type.

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');

Hvorfor Blobs er vigtige

Blobs og objekt-URL'er lader dig håndtere binære data helt på klientsiden: forhåndsvis uploads, generér downloads, og opdel store filer i dele. Husk at tilbagekalde URL'er, når du er færdig. Nu skal du sende filer til en server med 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);

Hurtig test

Hvad skal du kalde for at frigive hukommelsen, efter at du har brugt en objekt-URL til en download?

Besvar den i den interaktive lektion

Opsummering: Blobs og objekt-URL'er

Du har lært at håndtere binære data:

new Blob(parts, { type }) opbygger uforanderlige binære data.
Læs med text() og arrayBuffer(); opdel med slice().
URL.createObjectURL opretter en brugbar blob:-URL til forhåndsvisninger og downloads.
Kald altid URL.revokeObjectURL, når du er færdig, for at frigive hukommelse.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Blobs og objekt-URL'er” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Blobs og objekt-URL'er”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Blobs og objekt-URL'er”?

Opret og brug blob-URL'er til downloads. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Blobs og objekt-URL'er”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy