最近、フロントエンドの 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で Oracle データベースをバックアップするためのスケジュールされたタスクの設定に関するチュートリアル
>>: MySQLカスタム関数とストアドプロシージャの詳細な説明
目次概要1. 関数デバウンス2. 機能スロットリング(スロットル)概要関数アンチシェイクと関数スロッ...
フロントエンド開発において、$ は jQuery の関数です。$ のパラメータが異なると、実装される...
この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...
序文MySQL には次の 4 種類の演算子があります。算術演算子比較演算子論理演算子ビット演算子これ...
公式の MySQL ダンプ ツールで、特定のデータベースのみを復元するにはどうすればよいですか?完全...
GitLabのDocker使用法gitlab ドッカー起動コマンド docker run -d -p...
html <!DOCTYPE html> <html lang="ja&...
序文フッター領域を下部に固定します。ページの高さや幅に関係なく、モバイル メニューと同様に、フッター...
目次1. 背景2. 複合インデックスを理解する3. 左端一致原則4. フィールド順序の影響5. 単一...
目次トピック分析する基本的な解決策基本的な再帰再帰最適化要約するトピック私たちが答えなければならない...
1. アイデアMySQL に 1,000,000 件のレコードを挿入するのにたった 6 秒しかかかり...
目次Jenkinsのインストールインストールポート番号を変更します(デフォルトのポートは8080です...
序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...
長い間コンピューターで mysql を使用していなかったので、パスワードを忘れてしまいました。でも、...
これまでの仕事では、開発サーバーは一般的にTomcatでした。データソースは、多くの場合、appli...