Vue は URL に基づいて非同一オリジンのファイルをどのようにダウンロードするのか

「axios」からaxiosをインポートします。
// ファイルをダウンロードします（クロスドメインダウンロードの問題を解決できます）
エクスポート非同期関数downloadFile(fileUrl, fileName) {
  if (!fileUrl) が return;
  res = axios({ を待ちます
    メソッド: "get",
    url: ファイルURL、
    レスポンスタイプ: "blob"
  });
  newUrl = window.URL.createObjectURL(res.data); とします。
  a = document.createElement("a"); とします。
  新しいUrlを作成します。
  a.download = ファイル名;
  クリック();
  削除();
  //リソースのダウンロードが完了したら、createObjectURL によって占有されているキャッシュ リソースを手動でクリアできます。window.URL.revokeObjectURL(newUrl);
}

<テンプレート>
  <div>
      {{ファイル名}}
      <span
        class="ファイルダウンロード"
        @click="downloadFile(file.url, file.name)"
        >ダウンロード
      >
  </div>
</テンプレート>

<スクリプト>
「@/util/index.js」からダウンロードファイルをインポートします。
エクスポートデフォルト{
  コンポーネント: {},
  データ（） {
    戻る {
      ファイル：{
          url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F960x600%2F1426818724752.jpg&refer=http%3A%2F%2Fb.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627377638&t=662034e86ff9110854ca0316485e294b',
          名前:「美しい風景」
      }
    };
  },
  作成された() {},
  マウント() {},
  メソッド: {
    ダウンロードファイル
  }
};
</スクリプト>

<style lang="scss" スコープ>

</スタイル>

/*
 * バックエンドはファイルの URL を返し、フロントエンドはそれをダウンロードするためのタグを作成します*
 * 1. ファイルが画像またはブラウザでサポートされている形式の場合、ダウンロードをクリックするとファイルが直接開かれる問題を解決しました。
 * 2. ファイルをダウンロードするときにブラウザがちらつくことがあります*
 * ページ内での使用 * 1. ディレクティブ import downLoad from '@/directive/down-load-url' をインポートします。
 * 2. ディレクティブを登録する:{downLoad}
 * 3. ダウンロード ボタンのコマンドとして使用します。例: <el-button v-downLoad="url">ダウンロード</el-button>
 */

'./downLoad' から downLoad をインポートします

const インストール = 関数(Vue) {
  Vue.directive('downLoadUrl', ダウンロード)
}

downLoad.install = インストール

デフォルトのダウンロードをエクスポート
download-url/downLoad.js ファイルエクスポートデフォルト {
  bind(el, バインディング) {
    el.addEventListener('クリック', () => {
      console.log(binding.value) // url
      定数a = document.createElement('a')
      // let url = baseUrl + binding.value // URLが不完全な場合は、baseURLを連結する必要があります
      const url = binding.value // 完全なURLが直接使用されます // ここでURLをBLOBアドレスに変換します。
      fetch(url).then(res => res.blob()).then(blob => { // リンクアドレスの文字列コンテンツをblobアドレスに変換します。a.href = URL.createObjectURL(blob)
        コンソールログ(a.href)
        a.download = '' // ダウンロードしたファイルの名前// a.download = url.split('/')[url.split('/').length -1] // // ダウンロードしたファイルの名前document.body.appendChild(a)
        クリック()
      })
    })
  }
}