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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 異なるページ間のJavaScriptデータ転送(URLパラメータ取得)
  • Springboot で URL の後の jsessionid を削除する方法
  • JavaScript における URL オブジェクトの素晴らしい使い方
  • JavaScript ライブラリ urlcat URL ビルダー ライブラリ

<<:  Linux で Oracle データベースをバックアップするためのスケジュールされたタスクの設定に関するチュートリアル

>>:  MySQLカスタム関数とストアドプロシージャの詳細な説明

推薦する

JS 関数のアンチシェイクと関数スロットリングを理解する方法

目次概要1. 関数デバウンス2. 機能スロットリング(スロットル)概要関数アンチシェイクと関数スロッ...

jQueryの競合問題を解決する方法

フロントエンド開発において、$ は jQuery の関数です。$ のパラメータが異なると、実装される...

Element+vueを使用して開始時間と終了時間の制限を実装する

この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...

MySql における特殊演算子の使用の概要

序文MySQL には次の 4 種類の演算子があります。算術演算子比較演算子論理演算子ビット演算子これ...

MySQL の完全なデータベース バックアップからデータベースとテーブルを復元する方法

公式の MySQL ダンプ ツールで、特定のデータベースのみを復元するにはどうすればよいですか?完全...

Dockerイメージのインポートとエクスポートの実装

GitLabのDocker使用法gitlab ドッカー起動コマンド docker run -d -p...

CSS3 は下部に固定されたフッターを実装します (ページの高さに関係なく常に下部にあります)

序文フッター領域を下部に固定します。ページの高さや幅に関係なく、モバイル メニューと同様に、フッター...

MySQL複合インデックスの概要

目次1. 背景2. 複合インデックスを理解する3. 左端一致原則4. フィールド順序の影響5. 単一...

フィボナッチ数列のJavaScript出力を実装する方法

目次トピック分析する基本的な解決策基本的な再帰再帰最適化要約するトピック私たちが答えなければならない...

6秒でMySQLに100万件のレコードを挿入する方法を教えます

1. アイデアMySQL に 1,000,000 件のレコードを挿入するのにたった 6 秒しかかかり...

Jenkins を使用した Vue プロジェクトのワンクリック パッケージングと公開の実装

目次Jenkinsのインストールインストールポート番号を変更します(デフォルトのポートは8080です...

MySQL でスロークエリを有効にする方法の例

序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...

MacでMysqlのルートパスワードを忘れた場合の解決方法

長い間コンピューターで mysql を使用していなかったので、パスワードを忘れてしまいました。でも、...

Tomcat で JNDI データ ソースを構成する 3 つの方法

これまでの仕事では、開発サーバーは一般的にTomcatでした。データソースは、多くの場合、appli...