Javascript Blob-Objekt zum Erzielen eines Dateidownloads

Javascript Blob-Objekt zum Erzielen eines Dateidownloads

veranschaulichen

Vor kurzem bin ich auf eine Anforderung zum Herunterladen von Dateien gestoßen, bei der jedoch eine Authentifizierung erforderlich ist. Dies bedeutet, dass Sie den vom Hintergrund zurückgegebenen Download-Link nicht zum Herunterladen verwenden können, da jemand, der den Link erhält, ihn ohne Erlaubnis direkt herunterladen kann. Daher müssen Sie Ihre Denkweise ändern. Nachdem Sie Baidu durchsucht haben, erfahren Sie mehr über das Blob-Objekt. Darum geht es in diesem Artikel.

Hinweis: Dieser Artikel dient nur zum Aufzeichnen von Lerntracks. Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, damit wir ihn löschen können.

1. Blob-Objekt

Ein Blob-Objekt stellt ein unveränderliches, rohes dateiähnliches Objekt dar. Seine Daten können im Text- oder Binärformat gelesen und zur Datenmanipulation auch in einen ReadableStream konvertiert werden.

2. Frontend

Ideen zum Blob-Download:

1) Verwenden Sie Ajax, um eine Anfrage zu initiieren und geben Sie den Empfangstyp als Blob an (Antworttyp: „Blob“).
2) Lesen Sie die Inhaltsdisposition in den von der Anfrage zurückgegebenen Header-Informationen. Der zurückgegebene Dateiname ist darin enthalten (oder Sie können diesen Schritt überspringen, wenn Sie den Dateinamen anpassen).
3) Verwenden Sie URL.createObjectURL, um die angeforderten Blob-Daten in eine herunterladbare URL-Adresse umzuwandeln
4) Download mit dem a-Tag

Code:

// Download-Exportfunktion download(query,newFileName) {
  Rückgabeanforderung({
    URL: '/Datei/Download',
    Methode: 'get',
    Antworttyp: "Blob",
    Parameter: Abfrage
  }).then((res) => {
    /**
     * Ideen zum Herunterladen von Blobs * 1) Verwenden Sie Ajax, um eine Anfrage zu initiieren und geben Sie den Empfangstyp als Blob an (Antworttyp: „Blob“).
     * 2) Lesen Sie die Inhaltsdisposition in den von der Anfrage zurückgegebenen Header-Informationen. Der zurückgegebene Dateiname ist darin enthalten (oder Sie können den Dateinamen anpassen und diesen Schritt überspringen).
     * 3) Verwenden Sie URL.createObjectURL, um die angeforderten Blob-Daten in eine herunterladbare URL-Adresse umzuwandeln. * 4) Verwenden Sie zum Herunterladen das Tag „a“. * 
     */
    let blob = res.data
    // Dateinamen aus den Antwortheadern und den vom Backend festgelegten Dateinamen abrufen response.setHeader("Content-disposition", "attachment; filename=xxxx.docx");
    // let patt = neuer RegExp('Dateiname=([^;]+\\.[^\\.;]+);*')
    // let contentDisposition = decodeURI(res.headers['content-disposition'])
    // lass Ergebnis = patt.exec(contentDisposition)
    // let fileName = Ergebnis[1]

    //Konvertiere die angeforderten Blob-Daten in eine herunterladbare URL-Adresse let url = URL.createObjectURL(blob)
    // Erstelle ein Download-Tag <a>
    const aLink = document.createElement('a')
    aLink.href = URL
    // 2. Verwenden Sie den benutzerdefinierten Dateinamen direkt, um den Download-Dateinamen festzulegen aLink.setAttribute('download', newFileName )
    Dokument.Body.AnhängenUntergeordnetesElement(einLink)
    //Klick zum Herunterladen simulieren aLink.click()
    // Entfernen Sie das Download-Tag. document.body.removeChild(aLink);
  })
}

Aufruf dieser Methode

//Herunterladen download(row) {
      // filePath: Dateipfad, zum Beispiel: e:\upload\
	  // fileName: Dateiname, zum Beispiel: a.xlsx
      let form = {
        Dateipfad: Zeile.Dateipfad,
        Dateiname: Zeile.Dateiname,
      };
      //Download, row.fileOriginalName ist der Originalname der Datei, der nur zum Benennen der Datei beim Herunterladen verwendet wird. download(form, row.fileOriginalName);
    }
// Da ich den OSS-Dienst von Alibaba verwende, muss ich nur einen Dateipfad an das Backend zurückgeben, die OSS-Schnittstelle entsprechend dem Dateipfad abfragen, um den zurückgegebenen Dateistream abzurufen, z. B. (BufferedInputStream), und den Rückgabetyp im Antwortheader festlegen

3. Backend

Das Backend verwendet hier den OSS-Dienst von Alibaba, um den Dateistream direkt abzurufen (neuer BufferedInputStream (ossObject.getObjectContent ())). Wenn es sich nicht um OSS handelt, müssen Sie nur die Datei (File) auf dem entsprechenden Server lesen, in BufferedInputStream konvertieren und dann den folgenden Code direkt anwenden (dh BufferedOutputStream über response.getOutputStream () festlegen).

	// response: Antwort // filePath: Dateipfad, zum Beispiel: e:\upload\
	// fileName: Dateiname, zum Beispiel: a.xlsx
   public void download(HttpServletResponse Antwort, String Dateipfad, String Dateiname) {
        //Name der herunterzuladenden Datei response.reset();
        response.setHeader("Content-Disposition", "attachment;filename=" + Dateiname);
        response.setContentType("Anwendung/Oktett-Stream");
        Antwort.setCharacterEncoding("utf-8");
        // Erstellen Sie eine OSSClient-Instanz.
        OSS ossClient = neuer OSSClientBuilder().build(Endpunkt, accessKeyId, accessKeySecret);
        // ossObject enthält den Namen des Speicherplatzes, in dem sich die Datei befindet, den Dateinamen, Dateimetainformationen und einen Eingabestream.
        OSSObject ossObject = ossClient.getObject(bucketName, filePath + "/" + fileName);

        BufferedInputStream in = null;
        BufferedOutputStream raus = null;

        byte[] buff = neues byte[1024];
        int Länge = 0;
        versuchen {
            in = neuer BufferedInputStream(ossObject.getObjectContent());
            out = neuer BufferedOutputStream(response.getOutputStream());
            während ((Länge = in.read(buff)) != -1){
                out.write(buff,0,Länge);
            }
        } Fang (IOException e) {
            e.printStackTrace();
        Endlich
            wenn(out != null){
                versuchen {
                    aus.spülen();
                    aus.schließen();
                } Fang (IOException e) {
                    e.printStackTrace();
                }
            }
            wenn(in != null){
                versuchen {
                    in.schließen();
                } Fang (IOException e) {
                    e.printStackTrace();
                }
            }
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Mehrteiliger Upload von JavaScript-Dateien
  • Javascript ruft den vollständigen Pfad der Formulardatei ab
  • Detaillierte Erklärung des Prinzips und der Verwendung des JavaScript-Blob-Objekts
  • Einführung und Verwendung von Blob-Objekten in js
  • Lösung für das Video-Download-Problem der JS-Blob-Typ-URL
  • Detaillierte Erklärung zu Javascript-Dateien und Blobs

<<:  Grundlagen der HTML-Bearbeitung (ein Muss für Anfänger)

>>:  Installation von mysql5.7 und Implementierungsprozess der langfristigen kostenlosen Nutzung von Navicate

Artikel empfehlen

MySQL-Unterabfragen und gruppierte Abfragen

Inhaltsverzeichnis Überblick Unterabfragen Untera...

Implementierung der MySQL-Benutzerrechteverwaltung

1. Einführung in MySQL-Berechtigungen Es gibt 4 T...

CSS3-Animation zum Erzielen des Streamer-Button-Effekts

Beim Erlernen von CSS3 habe ich festgestellt, das...

Kann die wiederholbare Leseebene von MySQL Phantomlesevorgänge lösen?

Einführung Als ich mehr über die Datenbanktheorie...

Beginnen Sie CSS-Pseudoklassennamen nicht mit Zahlen

Wenn Neulinge Div+CSS entwickeln, müssen sie die ...

So teilen und führen Sie mehrere Werte in einem einzigen Feld in MySQL zusammen

Mehrere Werte kombiniert anzeigen Nun haben wir d...

Einige allgemeine Eigenschaften von CSS

CSS-Hintergrund: background:#00ffee; //Hintergrund...

SQL-Implementierung von LeetCode (197. Steigende Temperatur)

[LeetCode] 197.Steigende Temperatur Schreiben Sie...

So paginieren Sie schnell MySQL-Datenmengen im zweistelligen Millionenbereich

Vorwort Um bei der Backend-Entwicklung zu verhind...

Beispiel für einen SQL-Seriennummernerfassungscode

In diesem Artikel wird hauptsächlich das Beispiel...

Detaillierte Erklärung zur Verwendung der Vue-Nummernschild-Eingabekomponente

Eine einfache Nummernschild-Eingabekomponente (vu...