Mit der Entwicklung der Front-End-Technologie erfordern immer mehr Geschäftsszenarien ein Front-End für die Verarbeitung von Dateidownloads. Unter den vielen Methoden ist das Herunterladen über das Download-Attribut des <a> -Tags eine gängige und relativ einfache Methode.
Das herkömmliche <a> -Tag implementiert den Link-Sprung über href. Wenn Sie die Datei nur herunterladen möchten, anstatt zur Vorschau zu springen, ist es am besten, das download Attribut im <a> -Tag hinzuzufügen, und der Download-Vorgang kann einfach realisiert werden .
download ist ein neues Attribut des <a> -Tags in HTML5. Dieses Attribut erzwingt das Auslösen des Download-Vorgangs, weist den Browser an, die URL herunterzuladen, anstatt zu ihr zu navigieren, und fordert den Benutzer auf, sie als lokale Datei zu speichern. Zum Beispiel:
<a href=result.png download>herunterladen</a>
Wenn das download Attribut fehlt, wird durch Klicken auf „Download“ direkt zum Vorschaubild gewechselt. Wenn download Attribut hinzugefügt wird, wird der Download des Bildes ausgelöst.
Die aktuelle Kompatibilität des download Attributs ist wie in caniuse dargestellt:
Es ist ersichtlich, dass die meisten Mainstream-Browser grundsätzlich das download Attribut unterstützen und die Leistung des IE so beeindruckend ist wie eh und je. Derzeit verwenden viele Windows-Systeme immer noch den IE, was auch für viele Unternehmen zu berücksichtigen ist. Dieses Kompatibilitätsproblem schränkt die breitere Anwendung von download ein.
Angesichts einiger Geschäftsszenarien des dynamischen Herunterladens von Inhalten, bei denen die Adressen von Ressourcen wie Bildern nicht festgelegt sind (z. B. Bilder, die von einigen Online-Zeichentools generiert werden), kann die alleinige Verwendung von HTML die Anforderungen nicht erfüllen. Um unterschiedliche URL-Downloads zu erfüllen, kann über JS eine Methode zum dynamischen Auslösen von URL-Downloads implementiert werden.
function download(href, filename='') { const a = document.createElement('a') a.download = filename a.href = href document.body.appendChild(a) a.click() a.remove() } Es ist zu beachten, dass die im Code für das erstellte <a> ausgeführten Vorgänge appendChild und remove hauptsächlich der Kompatibilität mit dem Firefox-Browser dienen. Wenn Sie diese Methode unter dem Firefox-Browser aufrufen, fügen Sie das erstellte <a> -Tag nicht hinzu Klicken Sie auf den Text. Der Link führt zu nichts und löst einen Download aus, was in Chrome nicht der Fall ist.
Die obige Methode kann den Download von Ressourcen gleicher Herkunft realisieren. In vielen Szenarien müssen jedoch auch domänenübergreifende Ressourcen verarbeitet werden. Leider gilt das download Attribut derzeit nur für URLs mit demselben Ursprung . Das heißt, wenn die herunterzuladende Ressourcenadresse domänenübergreifend ist, ist das download Attribut ungültig und durch Klicken auf den Link wird eine Navigationsvorschau angezeigt.
Test: Zum Herunterladen klicken, das Ergebnis ist nur eine Vorschau und das Bild kann nicht heruntergeladen werden.
Hinweis: Chrome 65 unterstützte zuvor das download Attribut, um domänenübergreifende Downloads von Dateien auszulösen. Später folgte es strikt der Same-Origin-Richtlinie und konnte den Download domänenübergreifender Ressourcen nicht mehr über download -Attribut auslösen. FireFox unterstützt das download Attribut von domänenübergreifenden Ressourcen nicht.
Das download Attribut kann nicht nur Downloads auslösen, sondern auch den Namen der Download-Datei angeben:
<a href=test.png download=joker.png>Herunterladen</a>
Wenn das Suffix der heruntergeladenen Datei mit der Quelldatei übereinstimmt, können Sie den Standarddateinamen festlegen:
<a href=test.png download=joker>Herunterladen</a>
Der Autor ist einmal auf ein Problem gestoßen, das über das <a> -Tag ausgelöst wurde. Der Code war im Grunde derselbe wie die oben erwähnte Download- Methode, außer dass die Stelle, an der download Attribut festgelegt wurde, etwas anders war:
a.setAttribute(download, true)
Infolgedessen trat in der alten Version des Chrome-Browsers die folgende Situation auf.
Der Name der Download-Datei wird zu true . Offensichtlich liest der Browser den download Attributwert als Dateinamen.
Nach der Analyse sind die oben genannten Probleme hauptsächlich auf Folgendes zurückzuführen:
1. Zunächst sollte download nicht auf true gesetzt werden. Der Attributwert download unterscheidet sich von disabled . Er steht in direktem Zusammenhang mit dem Dateinamen. Und für diese Front-End- und Back-End-Responsive-Download-Methode ist das download Attribut nicht erforderlich.
2. Frühere Versionen von Chrome unterstützten nicht nur das download Attribut domänenübergreifender Ressourcen, sondern konnten auch die Dateinamen domänenübergreifender Ressourcen durch download zurücksetzen, sodass die obige Situation auftrat.
Das Geschäftsszenario, in dem Front-End und Back-End zusammenarbeiten, um den Dateidownload abzuschließen, wird im Allgemeinen dadurch implementiert, dass das Back-End Content-Disposition Informationen im Antwortheader festlegt.
Im HTTP-Szenario ist der erste Parameter von Content-Disposition entweder Inline (der Standardwert, der angibt, dass der Nachrichtentext in der Antwort als Teil der Seite oder als gesamte Seite angezeigt wird) oder Anhang (d. h. der Nachrichtentext). sollte lokal heruntergeladen werden; Die meisten Browser zeigen ein Dialogfeld zum Speichern unter an, in dem der Wert von Dateiname mit dem Namen der heruntergeladenen Datei vorab ausgefüllt wird.
Wenn Content-Disposition im Antwortheader festgelegt ist und das Frontend auch das download Attribut zum <a> -Tag des entsprechenden Links hinzufügt, lauten die Benennungsregeln zu diesem Zeitpunkt:
Wenn dem Content-Disposition-Attribut im HTTP-Header ein von diesem Attribut abweichender Dateiname zugewiesen wird, hat das HTTP-Header-Attribut Vorrang vor diesem Attribut.
Nach Tests wurde festgestellt, dass Folgendes gilt, wenn Content-Disposition im HTTP-Header nicht leer ist:
Unabhängig davon, ob im Chrome-Browser der erste Parameter von Content-Disposition im HTTP-Header auf attachment oder inline gesetzt ist, kann download den Dateinamen nicht zurücksetzen, solange filename festgelegt ist. Wenn der Dateiname hingegen leer ist, wird der download Attributwert auf den Dateinamen gesetzt. Im Firefox-Browser liest der Browser nur den Dateinamenwert von Content-Disposition . Wenn filename leer ist, wird der Name der Quelldatei verwendet. Zu diesem Zeitpunkt kann download den Dateinamen ohnehin nicht zurücksetzen.
Zusammenfassend lässt sich sagen: Wenn die Content-Disposition Informationen nicht im Antwortheader festgelegt sind (z. B. die URL mit demselben Ursprung, die die Ressource im Allgemeinen direkt lokalisiert), kann das download Attribut den Dateinamen zurücksetzen. Wenn das Backend den Dateinamen im Feld Content-Disposition festgelegt hat, hat der Dateinamenwert Vorrang.
Was soll ich tun, wenn ich den Dateinamen trotzdem zurücksetzen möchte, obwohl der Dateiname im Backend festgelegt wurde?
Blob: URL Es gibt auch eine Einführung zum download -Attribut:
Obwohl die HTTP-URL denselben Ursprung haben muss, können Sie blob: URL und data: URL verwenden, um Benutzern das Herunterladen von mit JavaScript generierten Inhalten zu erleichtern (z. B. Fotos, die mit einer Online-Zeichnungs-Webanwendung erstellt wurden).
Blob (Binary Large Object) ist ein binäres großes Objekt. Dies ist uns nicht unbekannt. Einige Datenbanken verwenden Blob, um den Feldtyp darzustellen, der Binärdateien speichert. Die Dateischnittstelle basiert ebenfalls auf Blob, erbt die Funktionen von Blob und erweitert sie, um Dateien auf dem Benutzersystem zu unterstützen. Blob-Objekte werden mit dem Blob-Konstruktor erstellt:
Blob(blobParts[, Optionen])
var debug = {hello: world};var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); Wenn Sie einige einfache Text- oder JS-String-Dateien herunterladen müssen, können Sie die Textinformationen in einen Blob-Binärstream konvertieren, eine Blob-URL generieren und das download Attribut verwenden, um den Download abzuschließen. Der Code lautet wie folgt.
const downloadText = (text, filename = '') { const a = document.createElement('a') a.download = filename const blob = new Blob([text], {type: 'text/plain'}) // Text bezieht sich auf den Text- oder Zeichenfolgeninhalt, der heruntergeladen werden muss a.href = window.URL.createObjectURL(blob) // Es wird eine URL-Zeichenfolge ähnlich wie blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf generiert. document.body.appendChild(a) a.click() a.remove()}Was ist der Unterschied zwischen dieser Blob-URL und der allgemeinen HTTP-URL?
Blob-URL/Objekt-URL ist ein Pseudoprotokoll, das die Verwendung von Blob- und Dateiobjekten als URL-Quellen wie Bilder und Download-Links für Binärdaten ermöglicht.
Der Browser erstellt intern über URL.createObjectURL() einen speziellen Verweis auf das Blob- oder Dateiobjekt. Die generierte Blob-URL kann nur in einer einzelnen Instanz des Browsers und in derselben Sitzung verwendet werden, und dieses URL-Objekt wird verwendet, wenn die Seite wird vom Browser freigegeben.
Daher kann die Blob-URL nicht auf eine Serverressource verweisen und Sie können sie nicht auf anderen Seiten öffnen. Gleichzeitig beanspruchen Blob-URLs aufgrund der Unterschiede in den Codierungsformaten weniger Speicherplatzressourcen und bieten eine bessere Leistung als Daten-URLs.
Blobs bieten eine sehr nützliche Funktion für die Webentwicklung: das Erstellen von Blob-URLs. Kapseln Sie die Binärdaten in ein Blob-Objekt und generieren Sie dann mit URL.createObjectURL() eine Blob-URL. Da es sich bei der Blob-URL selbst um eine URL mit demselben Ursprung handelt, können Sie diese URL beim download verwenden, um das Problem des Herunterladens und Benennens zu lösen domänenübergreifende Ressourcen.
Blob und Fetch können das Problem der domänen- und dateiübergreifenden Benennung lösen: Verwenden Sie fetch , um domänenübergreifende Ressourcen abzurufen, geben Sie ein Blob-Objekt zurück, generieren Sie eine Blob-URL und verwenden Sie download Attribut des <a> -Tags, um den Download auszulösen. Der Code lautet wie folgt:
function download(href, filename = '') { const a = document.createElement('a') a.download = filename a.href = href document.body.appendChild(a) a.click() a.remove() }function downloadFile(url, filename='') { fetch(url, { headers: new Headers({ Origin: location.origin, }), mode: 'cors', }) .then(res => res.blob()) .then(blob => { const blobUrl = window.URL.createObjectURL(blob) download(blobUrl, filename) window.URL.revokeObjectURL(blobUrl) })}Klicken Sie an dieser Stelle erneut auf Herunterladen, und die domänenübergreifenden Bilder können normal in den lokalen Bereich heruntergeladen werden.
Es ist zu beachten, dass der Server, auf dem sich die domänenübergreifenden Ressourcen befinden, mit Access-Control-Allow-Origin -Informationen konfiguriert werden muss, andernfalls erhalten Sie einen domänenübergreifenden Fehler in Großbuchstaben. Beispiel für eine Header-Konfiguration:
//Zugriff auf den Header durch einen beliebigen Domänennamen zulassen('Access-Control-Allow-Origin: *'); //Den Domänennamen für den Zugriff auf den Header angeben('Access-Control-Allow-Origin: https://h5.ele.me ');Diese Methode weist immer noch einige Mängel auf. Beispielsweise begrenzt der Browser die Größe der Blob-Daten auf nicht mehr als 500 MB und ist auch hinsichtlich der Leistung unzureichend.
Zusammenfassen Derzeit gibt es viele Download-Methoden im Frontend, und download Attribut-Download ist eine der einfacheren. Eine sorgfältige Prüfung einiger dieser Funktionen kann jedoch auch viele nützliche Informationen offenbaren. Die Kompatibilität dieses download ist derzeit ebenfalls ein großes Problem. Ich glaube jedoch, dass sich das Kompatibilitätsproblem des download nicht mehr verbessern wird Zukunft, und die Anwendungsaussichten werden immer breiter.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.