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

Detaillierte Erläuterung der Vue-Projektverpackung

Inhaltsverzeichnis 1. Zugehörige Konfiguration Fa...

Lösen Sie das Problem der Kombination von AND und OR in MySQL

Wie unten dargestellt: Wählen Sie Produktname, Pr...

Miniprogramm zur Implementierung der Rechnerfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Grundkenntnisse in HTML: ein erstes Verständnis von Webseiten

HTML ist die Abkürzung für Hypertext Markup Langua...

Ein tiefer Einblick in JavaScript-Promises

Inhaltsverzeichnis 1. Was ist Promise? 2. Warum g...

Notieren Sie eine Falle bei der Aktualisierung der MySQL-Update-Anweisung

Hintergrund Kürzlich habe ich während eines Onlin...

10 Tipps für das User Interface Design mobiler Apps

Tipp 1: Konzentriert bleiben Die besten mobilen A...

So implementieren Sie eine geplante Sicherung einer MySQL-Datenbank

1. Erstellen Sie ein Shell-Skript vim backupdb.sh...