ドメイン間でファイルをダウンロードし、ファイル名を変更する

導入

フロントエンドは通常、一般的に使用されるaタグを使用し、download属性を指定し、ダウンロードをトリガーして静的ファイルをダウンロードします。

download HTML5
この属性は、URL に移動するのではなく URL をダウンロードするようにブラウザに指示するため、ユーザーは URL をローカル ファイルとして保存するように求められます。プロパティに値がある場合、この値はダウンロード保存中に事前設定されたファイル名として使用されます (ファイル名はユーザーが希望する場合でも変更できます)。このプロパティには許可される値に制限はありませんが、/ と \ はアンダースコアに変換されます。ほとんどのファイル システムではファイル名の句読点が制限されているため、ブラウザは提案されるファイル名をそれに応じて調整します。

注:
このプロパティは、オリジン URL にのみ適用されます。
HTTP URL は同じオリジンにある必要がありますが、blob: URL と data: URL を使用すると、JavaScript を使用して生成されたコンテンツ (オンライン描画 Web アプリケーションを使用して作成された写真など) をユーザーが簡単にダウンロードできるようになります。
HTTP ヘッダーの Content-Disposition 属性にこの属性とは異なるファイル名が割り当てられている場合、HTTP ヘッダー属性がこの属性より優先されます。
HTTP ヘッダーの Content-Disposition 属性がインラインに設定されている場合 (つまり、Content-Disposition='inline')、Firefox は HTTP ヘッダーの Content-Dispositiondownload 属性を優先します。

ただし、この方法には欠点があり、クロスドメイン リソースの場合、download属性が機能せず、ダウンロードされたリソースの名前が変更されてしまいます。では、リソースの名前を変更する方法

クロスドメインダウンロード

静的ファイル リソースをダウンロードするための新しい http リクエストを作成できます。

export function downFile(url , filename) {
  axios
    .get(url, {
      responseType: 'blob'  //  注意 responseType 属性需要加上
    })
    .then(async res => {
      console.log(res);
      const data = res.data;
      const bolb = new Blob([data], { type: 'application/pdf' });  // 此处文件类型为pdf
      saveAs(bolb, filename);
    });
}

このフィールドは、オブジェクトをresponseType直接使用して変換できる BLOB ストリームを返すようにサービスに指示します。オブジェクトBlobを取得したら、ラベルをダウンロードできますbloba

ダウンロードをトリガーする

function saveAs(blob, filename) {
  let aLink = document.createElement('a');
  let evt = document.createEvent('HTMLEvents');
  evt.initEvent('click', true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
  aLink.download = filename;
  aLink.href = window.URL.createObjectURL(blob);
  aLink.click();
}

新しいaタグを作成し、ダウンロードを手動でトリガーします。

Base64ファイルのダウンロード

サーバーがインターフェイスのカプセル化を実行し、base64文字列を直接返す場合は、それを変換するだけです

function  downloadFile(content, fileName) {
      let aLink = document.createElement('a');
      let blob = base64ToBlob('data:application/pdf;base64,' + content, 'pdf');
      let evt = document.createEvent('HTMLEvents');
      evt.initEvent('click', true, true);
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    }
   function  base64ToBlob(base64) {
      return new Promise(resolve => {
        let arr = base64.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        resolve(new Blob([u8arr], { type: mime }));
      });
    }
downloadFile(url, 'filename')