Als ich kürzlich an einem Frontend-Docking-Funktionsmodul für vue.js arbeitete, musste ich eine Funktion zum Herunterladen von Bildern implementieren. Das Backend gab eine Zeichenfolge mit Bild-URLs zurück. Ich probierte viele Methoden aus und stellte fest, dass der Effekt beim Klicken auf „Herunterladen“ darin bestand, zu einer neuen Bild-Webseite zu springen. Nach einigem Nachdenken löste ich dieses Problem schließlich: Dies sind die vom Backend zurückgegebenen JSON-Daten (die IP-Adresse ist verschlüsselt, um den Verlust wichtiger Informationen zu verhindern): Meine Referenz in HTML sieht folgendermaßen aus: <a @click="downCom" > Lizenz herunterladen<i class="icon-down"></i> </a> Methode zum Herunterladen von Bildern in der vue.js-Methode: downCom() { lass das = dies; dies.$http.files().then(res => { lassen Sie hreLocal=""; hreLocal = res.data.data.url; dies.downloadByBlob(hreLocal,"Bild") }); }, Die folgende Methode kann direkt verwendet werden. Übergeben Sie dieser Methode einfach die URL Ihres Bildes, und Sie können vue.js implementieren, um das Bild herunterzuladen. downloadByBlob(URL,Name) { let image = neues Bild() image.setAttribute('crossOrigin', 'anonymous') image.src = URL bild.onload = () => { let canvas = document.createElement('canvas') Leinwandbreite = Bildbreite Leinwandhöhe = Bildhöhe lass ctx = canvas.getContext('2d') ctx.drawImage(Bild, 0, 0, Bildbreite, Bildhöhe) canvas.toBlob((blob) => { let url = URL.createObjectURL(blob) herunterladen (URL, Name) // Geben Sie das URL-Objekt nach der Verwendung frei URL.revokeObjectURL(url) }) } }, Die Methode download(url,name) hat den Namen: Funktion herunterladen(href, Name) { let eleLink = document.createElement('a') eleLink.download = Name eleLink.href = href eleLink.click() eleLink.entfernen() } Nachdem Sie den obigen Code eingegeben haben, können Sie Bilder herunterladen, anstatt sie zu durchsuchen. Zum Schluss können Sie erfolgreich auf das Bild klicken, um es herunterzuladen. Der Effekt ist wie folgt: Dies ist das Ende dieses Artikels über das Herunterladen von Bildern durch vue.js gemäß der Bild-URL. Weitere relevante Inhalte zum Herunterladen von Bildern über die URL von vue.js finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Tutorial zum Einrichten geplanter Aufgaben zum Sichern der Oracle-Datenbank unter Linux
>>: Detaillierte Erläuterung der benutzerdefinierten MySQL-Funktionen und gespeicherten Prozeduren
In diesem Artikel wird der spezifische Code des W...
Das Erstellen von Webseiten, die Webstandards ents...
Vorwort Wenn Sie sich auf die Stelle eines Betrie...
Laden Sie MySQL für Mac herunter: https://downloa...
Heute werde ich über einen CSS-Spezialeffekt spre...
Spezifische Methode: 1. Öffnen Sie die Eingabeauf...
Inhaltsverzeichnis Struktur auswählen Schleifenst...
Wie wird die MySQL-Select-Anweisung ausgeführt? I...
MySQL 5.7.8 führte das JSON-Feld ein. Dieser Feld...
Ich habe kürzlich an einem Projekt zur Gesichtser...
Das MySQL auf einem Server im Computerraum lief e...
Inhaltsverzeichnis Überblick 1. So animieren Sie ...
chmod-Befehlssyntax Dies ist die korrekte Syntax ...
Nach der Veröffentlichung von CentOS8.0-1905 habe...
1 Übersicht System CentOS8, verwenden Sie httpd, ...