vue.js lädt Bilder entsprechend der Bild-URL herunter

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!