veranschaulichenVor 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-ObjektEin 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. FrontendIdeen zum Blob-Download:
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
// 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(); } } } ZusammenfassenDieser 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:
|
<<: Grundlagen der HTML-Bearbeitung (ein Muss für Anfänger)
Inhaltsverzeichnis Überblick Unterabfragen Untera...
Docker-Installation curl -fsSL https://get.docker...
1. Einführung in MySQL-Berechtigungen Es gibt 4 T...
Beim Erlernen von CSS3 habe ich festgestellt, das...
Einführung Als ich mehr über die Datenbanktheorie...
Wenn Neulinge Div+CSS entwickeln, müssen sie die ...
Linux verwendet Dateien als Grundlage, um die Ger...
Mehrere Werte kombiniert anzeigen Nun haben wir d...
CSS-Hintergrund: background:#00ffee; //Hintergrund...
[LeetCode] 197.Steigende Temperatur Schreiben Sie...
Vorwort Um bei der Backend-Entwicklung zu verhind...
In diesem Artikel wird hauptsächlich das Beispiel...
Schauen Sie sich zuerst den Code und die Wirkung ...
1. Node-Server einrichten + Datenbankverbindung D...
Eine einfache Nummernschild-Eingabekomponente (vu...