H5 a タグの download 属性を使用してサービス上のファイルをダウンロードする際のクロスドメインの問題を解決する

最も簡単な方法:

 <a href='url' download=filename.ext>ファイルをダウンロード</a>

URL が同じソース リソースを指している場合は、正常です。

URL がサードパーティのリソースを指している場合、ダウンロードは失敗し、動作はダウンロードを使用しない場合と同じになります。ブラウザで開けるファイルはブラウザで直接開き、そうでないファイルはブラウザで直接開きます。開くと直接ダウンロードされます。ブラウザで開いたファイルは手動でダウンロードできます。

解決策 1: ブラウザーで開けない .zip/.rar ファイルにファイルを圧縮してダウンロードします。

解決策 2: バックエンド転送を通じて、バックエンドはサードパーティのリソースを要求し、フロントエンドはファイルセーバーなどのツールを使用してファイルを保存します。

URL が指すサードパーティ リソースが CORS で構成されている場合、ダウンロード属性は無効ですが、ファイルをローカルで取得してダウンロードすることはでき、ファイル名を変更することはできません。

 const downloadRes = async (url, name) => { let response = await fetch(url) // コンテンツを BLOB アドレスに変換します let blob = await response.blob() // 非表示のダウンロード可能なリンクを作成します let objectUrl = window. URL .createObjectURL(blob) let a = document.createElement('a') //アドレス a.href = objectUrl //ファイル名を変更 a.download = name //トリガークリック document.body.appendChild(a) a.click() //削除 setTimeout(() => document.body.removeChild(a), 1000)}

画像をダウンロードしたい場合は、画像を Base64 形式に変換してからダウンロードできます。

 ```export const downloadImg = async (url, name) => { var Canvas = document.createElement('canvas'), ctx = Canvas.getContext('2d'), img = new Image(); '匿名'; img.onload = function() { Canvas.height = img.height; ctx.drawImage(img, 0, 0); var dataURL = Canvas.toDataURL('image/png'); a.href = dataURL; .body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); Canvas = null; }, 1000); img.src = URL;};```

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。