javascript - Angular Ladda ner stora blobbar

Jag har ett problem liknande detta där jag framgångsrikt laddar ner en blob som genereras från en backend via HTTP GET men filen sparas i webbläsarens minne innan nedladdningen börjar.

Det är inget problem när man laddar ner små filer men det laddas inte ner filer på 100 MB+ omedelbart.

Att prenumerera på själva GET orsakar fördröjningen vid sparandet av de stora filerna.

Jag använder Angular 6 med en objektbutiksbackend. Här är nedladdningsfunktionen:

finalDownload(url: string) {
  let headers = new HttpHeaders();

  headers = headers.append('X-Auth-Token', token);

  return this.http.get(url, { headers, responseType: 'blob' })
  .subscribe(response => {
    saveAs(response);
  })
}

Här är processen:

  1. Användaren trycker på nedladdningsknappen
  2. GET-förfrågan med rubriker skickas till backend
  3. Så snart jag prenumererar på svaret, lagras blobben i webbläsarens minne.
  4. När blobben är helt lagrad i webbläsaren börjar saveAs/nedladdningen

Steg 3 är där problemet uppstår. Den här devtools-skärmdumpen med 108 MB överförda ackumuleras till filstorleken (jag laddade ner en 100 MB fil) innan själva nedladdningen till filsystemet börjar.

Svar #1

Du kan försöka använda URL.createObjectURL:

URL.createObjectURL() kan användas för att konstruera och analysera URL:er. URL.createObjectURL() specifikt kan användas för att skapa en referens till en File eller en Blob. Till skillnad från en base64-kodad data-URL innehåller den inte själva datan för objektet - istället håller den en referens.

Den trevliga saken med detta är att det är riktigt snabbt. Tidigare har vi varit tvungna att skapa en instans av FileReader och läsa hela filen som en base64-data-URL, vilket tar tid och mycket minne. Med createObjectURL() är resultatet tillgängligt direkt, vilket gör att vi kan göra saker som att läsa bilddata till en canvas.

Använd följande kod som referens

const blob = new Blob([data], { type: 'application/octet-stream' });
this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));

Relaterade artiklar