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

Verwendung und Ausführungsprozess des HTTP-Moduls im Knoten

Welche Rolle spielt http im Knoten? Die Aufgabe d...

Erweiterte Closures in JavaScript erklärt

Inhaltsverzeichnis 1. Das Konzept der Schließung ...

So passen Sie einen EventEmitter in node.js an

Inhaltsverzeichnis Vorwort 1. Was ist 2. So verwe...

So installieren Sie eine PHP7 + Nginx-Umgebung unter CentOS6.6

Dieser Artikel beschreibt, wie man eine PHP7 + Ng...

Detaillierte Erklärung des Missverständnisses zwischen MySQL und Oracle

Inhaltsverzeichnis Wesentlicher Unterschied Daten...

Grafisches Tutorial zur Installation von mysql5.7.17.msi

mysql-5.7.17.msi Installation, folgen Sie den Scr...

Mybatis-Statistiken zur Ausführungszeit jeder SQL-Anweisung

Hintergrund In letzter Zeit werde ich in Intervie...

10 tödliche semantische Fehler in der Webtypografie

<br />Dies stammt aus dem Inhalt von „Web Fr...

Tutorial zur Installation von PHP auf CentOS über Yum

Lassen Sie mich zunächst vorstellen, wie Sie PHP ...