Selesaikan masalah lintas domain dalam mengunduh file pada layanan menggunakan atribut unduh dari tag H5 a

Cara paling sederhana:

 <a href='url' download=namafile.ext>Unduh file</a>

Jika URL menunjuk ke sumber sumber yang sama, itu normal.

Jika URL mengarah ke sumber pihak ketiga, pengunduhan akan gagal, dan perilakunya akan sama seperti saat pengunduhan tidak digunakan - file yang dapat dibuka oleh browser akan dibuka langsung oleh browser, dan file yang tidak dapat dibuka dibuka akan langsung diunduh. File yang dibuka oleh browser dapat diunduh secara manual.

Solusi 1: Kemas file ke dalam file .zip/.rar yang tidak dapat dibuka oleh browser dan unduh.

Solusi 2: Melalui penerusan back-end, back-end meminta sumber daya pihak ketiga dan mengembalikannya ke front-end menggunakan alat seperti penghemat file untuk menyimpan file.

Jika sumber daya pihak ketiga yang ditunjuk oleh URL dikonfigurasi dengan CORS, atribut download tidak valid, tetapi file dapat diperoleh dan diunduh secara lokal, dan nama file tidak dapat diubah.

 const downloadRes = async (url, nama) => { let respon = menunggu pengambilan(url) // Ubah konten menjadi alamat blob let blob = tunggu respon.blob() // Buat tautan unduhan tersembunyi let objectUrl = window. URL .createObjectURL(blob) let a = document.createElement('a') //Alamat a.href = objectUrl //Ubah nama file a.download = nama // Klik pemicu document.body.appendChild(a) a.click() //Hapus setTimeout(() => document.body.removeChild(a), 1000)}

Jika kita ingin mendownload gambar, kita dapat mengkonversi gambar tersebut ke format base64 lalu mendownloadnya.

 ```ekspor const downloadImg = async (url, nama) => { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); 'Anonim'; img.onload = function() { kanvas.tinggi = img.tinggi; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL('image/png'); biarkan a = document.createElement('a'); .body.appendChild(a); a.click(); setTimeout(() => { dokumen.body.removeChild(a); kanvas = null; }, 1000); };img.src = url;};```

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.