Dengan berkembangnya teknologi front-end, semakin banyak skenario bisnis yang memerlukan front-end untuk menangani pengunduhan file. Di antara sekian banyak metode, pengunduhan melalui atribut download pada tag <a>
adalah metode yang umum dan relatif sederhana.
Tag <a>
konvensional menerapkan lompatan tautan melalui href. Jika Anda hanya ingin mengunduh file daripada melompat ke pratinjau, cara terbaik adalah menambahkan atribut download
di tag <a>
, dan operasi pengunduhan dapat dengan mudah direalisasikan. .
download
adalah atribut baru dari tag <a>
di HTML5. Atribut ini akan memaksa operasi pengunduhan dipicu, menginstruksikan browser untuk mengunduh URL alih-alih menavigasi ke sana, dan meminta pengguna untuk menyimpannya sebagai file lokal, Misalnya:
<a href=result.png unduh>unduh</a>
Jika atribut download
tidak ada, mengklik download akan langsung mengubah ke gambar pratinjau. Ketika atribut download
ditambahkan, download gambar akan dipicu.
Kompatibilitas atribut download
saat ini adalah seperti yang ditunjukkan di caniuse:
Dapat dilihat bahwa sebagian besar browser arus utama pada dasarnya mendukung atribut download
, dan kinerja IE tetap mengesankan seperti sebelumnya. Saat ini, banyak sistem Window yang masih menggunakan IE, yang juga merupakan sesuatu yang perlu dipertimbangkan oleh banyak kebutuhan bisnis. Masalah kompatibilitas ini membatasi penerapan download
yang lebih luas.
Dihadapkan pada beberapa skenario bisnis pengunduhan konten dinamis, yaitu alamat sumber daya seperti gambar tidak tetap (seperti gambar yang dihasilkan oleh beberapa alat menggambar online), hanya menggunakan HTML tidak dapat memenuhi kebutuhan. Untuk memenuhi pengunduhan URL yang berbeda, metode yang memicu pengunduhan URL secara dinamis dapat diterapkan melalui JS.
fungsi unduh(href, nama file='') { const a = document.createElement('a') a.download = nama file a.href = href document.body.appendChild(a) a.click() a.remove() }
Perlu dicatat bahwa operasi appendChild
dan remove
yang dilakukan pada <a>
yang dibuat dalam kode terutama untuk kompatibilitas dengan browser FireFox. Saat memanggil metode ini di bawah browser FireFox, jika Anda tidak menambahkan tag <a>
yang dibuat ke isi, klik Tautan tidak akan melakukan apa pun dan memicu pengunduhan, yang tidak terjadi di Chrome.
Metode di atas dapat mewujudkan pengunduhan sumber daya asal yang sama. Namun dalam banyak skenario, sumber daya lintas domain juga perlu diproses. Sayangnya, atribut download
saat ini hanya berlaku untuk URL asal yang sama . Artinya, jika alamat sumber daya yang akan diunduh adalah lintas-domain, atribut download
tidak valid dan mengklik link tersebut akan berubah menjadi pratinjau navigasi.
Test : Klik untuk download, hasilnya hanya preview dan gambar tidak bisa didownload.
Catatan: Chrome 65 sebelumnya mendukung atribut download
untuk memicu download file lintas domain. Setelah itu, Chrome 65 secara ketat mengikuti kebijakan asal yang sama dan tidak dapat lagi memicu download sumber daya lintas domain melalui atribut download
. FireFox belum mendukung atribut download
sumber daya lintas domain.
Atribut download
tidak hanya dapat memicu download, tetapi juga menentukan nama file download:
<a href=test.png download=joker.png>Unduh</a>
Jika akhiran file yang diunduh konsisten dengan file sumber, Anda dapat mengatur nama file default:
<a href=test.png download=joker>Unduh</a>
Penulis pernah mengalami masalah yang memicu pengunduhan sumber daya lintas domain melalui tag <a>
Kode pada dasarnya sama dengan metode pengunduhan yang disebutkan di atas, hanya saja tempat pengaturan atribut download
sedikit berbeda:
a.setAttribute(unduh, benar)
Akibatnya, situasi berikut terjadi di browser Chrome versi lama.
Nama file unduhan menjadi true
. Jelasnya, browser membaca nilai atribut download
sebagai nama file.
Setelah dianalisis, permasalahan di atas terutama disebabkan oleh:
1. Pertama-tama, download
tidak boleh disetel ke true
. Nilai atribut download
berbeda dengan disabled
. Ini terkait langsung dengan nama file. Dan untuk metode pengunduhan responsif front-end dan back-end ini, atribut download
tidak diperlukan.
2. Chrome versi awal tidak hanya mendukung atribut download
sumber daya lintas domain, tetapi juga menyetel ulang nama file sumber daya lintas domain melalui download
, sehingga situasi di atas terjadi.
Skenario bisnis di mana front-end dan back-end bekerja sama untuk menyelesaikan pengunduhan file umumnya diterapkan oleh back-end yang mengatur informasi Content-Disposition
di header respons.
Dalam skenario HTTP, parameter pertama Disposisi Konten adalah inline (nilai default, yang menunjukkan bahwa isi pesan dalam balasan akan ditampilkan sebagai bagian dari halaman atau keseluruhan halaman), atau lampiran (artinya isi pesan harus diunduh ke lokal; Sebagian besar browser akan menampilkan kotak dialog simpan sebagai, mengisi nilai nama file dengan nama file yang diunduh).
Jika Content-Disposition
diatur di header respons dan front end juga menambahkan atribut download
ke tag <a>
pada link yang sesuai, maka aturan penamaan saat ini adalah:
Jika atribut Content-Disposition di header HTTP diberi nama file yang berbeda dari atribut ini, atribut header HTTP akan diutamakan daripada atribut ini.
Setelah pengujian, ditemukan bahwa ketika Content-Disposition
di header HTTP tidak kosong:
Di browser Chrome, tidak peduli apakah parameter pertama Content-Disposition
di header HTTP disetel ke attachment atau inline , download
tidak dapat menyetel ulang nama file selama nama file disetel. Sebaliknya, jika nama file kosong, nilai atribut download
akan disetel ke nama file. Di browser FireFox, browser hanya akan membaca nilai nama file Content-Disposition
. Jika nama file kosong, nama file sumber akan diambil. Saat ini, download
tidak dapat mengatur ulang nama file.
Ringkasnya: Jika informasi Content-Disposition
tidak disetel di header respons (misalnya, URL asal yang sama yang umumnya secara langsung menemukan sumber daya), atribut download
dapat mengatur ulang nama file. Jika backend telah menetapkan nama file di bidang Content-Disposition
, nilai nama file yang akan berlaku.
Apa yang harus saya lakukan jika saya masih ingin mereset nama file ketika nama file telah ditetapkan di backend?
Gumpalan: URL Ada juga pengenalan atribut download
:
Meskipun URL HTTP harus berasal dari asal yang sama, Anda dapat menggunakan blob: URL dan data: URL untuk memudahkan pengguna mengunduh konten yang dibuat menggunakan JavaScript (seperti foto yang dibuat menggunakan aplikasi web menggambar online).
Blob
(Binary Large Object) adalah objek biner besar. Kita sudah familiar dengan hal ini. Beberapa database menggunakan Blob untuk mewakili tipe bidang yang menyimpan file biner. Antarmuka File juga didasarkan pada Blob, mewarisi fungsi Blob dan memperluasnya untuk mendukung file pada sistem pengguna. Objek Blob dibuat menggunakan konstruktor Blob:
Gumpalan(blobParts[, opsi])
var debug = {halo: dunia};var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
Jika Anda perlu mengunduh beberapa file teks sederhana atau string JS, Anda dapat mengonversi informasi teks menjadi aliran biner blob, membuat URL Blob, dan menggunakan atribut download
untuk menyelesaikan pengunduhan. Kodenya adalah sebagai berikut.
const downloadText = (teks, nama file = '') { const a = document.createElement('a') a.download = nama file const blob = new Blob([text], {type: 'text/plain'}) // teks mengacu pada konten teks atau string yang perlu diunduh a.href = window.URL.createObjectURL(blob) // String URL yang mirip dengan blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf akan dihasilkan document.body.appendChild(a) a.click() a.remove()}
Apa perbedaan antara URL Blob ini dan URL HTTP umum?
URL Blob/URL Objek adalah protokol semu yang memungkinkan objek Blob dan File digunakan sebagai sumber URL seperti gambar dan tautan unduhan data biner.
Browser membuat referensi khusus ke objek Blob atau File secara internal melalui URL.createObjectURL()
. URL Blob yang dihasilkan hanya dapat digunakan dalam satu instance browser dan dalam sesi yang sama, dan objek URL ini akan digunakan saat halaman keluar.
Oleh karena itu, URL Blob tidak dapat menunjuk ke sumber daya server dan Anda tidak dapat membukanya di halaman lain. Pada saat yang sama, karena perbedaan format pengkodean, URL Blob menggunakan lebih sedikit sumber daya ruang dan berperforma lebih baik daripada URL Data.
Blob menyediakan fitur yang sangat berguna untuk pengembangan web: membuat URL blob. Enkapsulasi data biner menjadi objek Blob, lalu gunakan URL.createObjectURL()
untuk menghasilkan URL Blob Karena URL Blob itu sendiri adalah URL asal yang sama, Anda dapat menggunakan URL ini dengan download
untuk menyelesaikan masalah pengunduhan dan penamaan. sumber daya lintas domain.
Blob dan Fetch dapat memecahkan masalah penamaan lintas-domain dan file: gunakan fetch
untuk mendapatkan sumber daya lintas-domain, mengembalikan objek blob dan menghasilkan URL Blob, dan memicu pengunduhan dengan atribut download
dari tag <a>
kodenya adalah sebagai berikut:
fungsi unduh(href, nama file = '') { const a = document.createElement('a') a.download = nama file a.href = href document.body.appendChild(a) a.click() a.remove() }fungsi downloadFile(url, nama file='') { ambil(url, { header: Header baru({ Asal: lokasi.asal, }), mode: 'cors', }) .then(res => res.blob()) .then(blob => { const blobUrl = window.URL.createObjectURL(blob) unduh(blobUrl, nama file) window.URL.revokeObjectURL(blobUrl) })}
Pada titik ini, klik Unduh lagi, dan gambar lintas domain dapat diunduh ke area lokal secara normal.
Perlu dicatat bahwa server tempat sumber daya lintas domain berada perlu dikonfigurasi dengan informasi Access-Control-Allow-Origin
, jika tidak, Anda akan mendapatkan kesalahan lintas domain huruf besar. Contoh konfigurasi header:
//Izinkan nama domain apa pun untuk mengakses header('Access-Control-Allow-Origin: *'); //Tentukan nama domain untuk mengakses header('Access-Control-Allow-Origin: https://h5.ele.me ');
Masih terdapat beberapa kekurangan pada metode ini, misalnya browser akan membatasi ukuran data Blob tidak lebih dari 500M, dan juga kurang memadai dari segi performa.
Meringkaskan Saat ini, ada banyak metode pengunduhan di bagian depan, dan pengunduhan atribut download
adalah salah satu yang lebih sederhana, namun pertimbangan cermat terhadap beberapa fitur ini juga dapat mengungkapkan banyak informasi berguna. download
erat kaitannya dengan fitur browser. Saat ini, kompatibilitas atribut ini juga menjadi masalah besar. Namun, bahkan pejabat Microsoft mengimbau pengguna untuk tidak menggunakan download
lagi masa depan, dan prospek penerapannya akan menjadi semakin populer.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.