vue.jsは画像のURLに従って画像をダウンロードします

最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロードする機能を実装する必要がありました。バックエンドは画像の URL の文字列を返しました。さまざまな方法を試した結果、ダウンロードをクリックすると、新しい画像の Web ページにジャンプすることがわかりました。しばらく考えた後、ようやくこの問題を解決しました。

これはバックエンドから返される JSON データです (重要な情報の漏洩を防ぐために IP アドレスはコード化されています)。

私の HTML での参照は次のようになります:

<a @click="downCom" >
                ライセンスをダウンロード<i class="icon-down"></i>
              </a>

vue.js メソッドで画像をダウンロードする方法:

ダウンコム() {
      that = this とする;
      this.$http.files().then(res => {
        hreLocal=""; とします。
        hreLocal = res.data.data.url;
        this.downloadByBlob(hreLocal,"pic")

      });
    },

次のメソッドを直接使用できます。このメソッドに画像の URL を渡すだけで、vue.js を実装して画像をダウンロードできます。

downloadByBlob(url,name) {
    画像 = 新しい画像()
    image.setAttribute('crossOrigin', '匿名')
    image.src = URL
    イメージ.onload = () => {
      キャンバスを document.createElement('キャンバス') にします。
      キャンバス幅 = 画像幅
      キャンバスの高さ = 画像の高さ
      ctx = canvas.getContext('2d') とします。
      ctx.drawImage(画像、0、0、画像.幅、画像.高さ)
      キャンバス.toBlob((blob) => {
        url = URL.createObjectURL(blob) とします。
        ダウンロード(URL,名前)
        // 使用後は URL オブジェクトを解放します URL.revokeObjectURL(url)
      })
    }
  },

download(url,name) メソッドが呼び出されました:

関数ダウンロード(href, name) {
  eleLink = document.createElement('a') とします。
  eleLink.download = 名前
  eleLink.href = href
  eleLink.click()
  eleLink.削除()
}

上記のコードを完了すると、画像を閲覧する代わりにダウンロードできるようになります。

最後に、画像をクリックしてダウンロードすると、次のような効果が得られます。

これで、画像 URL に従って vue.js で画像をダウンロードする方法についての説明は終わりです。vue.js の画像 URL ダウンロードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: