Unduh file dari folder lokal di html

Question

Baru-baru ini saya mengembangkan fitur yang perlu menambahkan tombol unduh ke halaman untuk mendukung pengunduhan file PDF yang dihosting di CDN. Saya ingat mengunduh file sangat sederhana, pada dasarnya sama dengan membuka tautan di tab baru. Namun semakin sederhana pemikiran Anda, semakin banyak masalah yang akan Anda temui dalam proses implementasi

Table of Contents Show

Menggunakan tag <a>_ dengan atribut unduhan (Tidak berfungsi)
Temukan file yang telah Anda unduh di PC Anda
Ubah folder unduhan default di PC Anda
Mengapa beberapa file tidak dapat dibuka di Internet Explorer
Tentang unduhan dan peringatan keamanan
Bagaimana cara mengunduh file lokal dalam HTML?
Bagaimana cara mengunduh file dari folder tertentu?
Bagaimana cara membuat tautan mengunduh file secara otomatis dalam HTML?
Bagaimana Anda mereferensikan file lokal dalam HTML?

Untuk mendemonstrasikan fungsi pengunduhan, artikel ini menggunakan pengunduhan file JavaScript Google Analytics sebagai contoh

Menggunakan tag <a>_ dengan atribut unduhan (Tidak berfungsi)

Sangat mudah untuk mengunduh file dengan tag <a>, ingatlah untuk menambahkan atribut unduhan untuk memberi tahu browser untuk mengunduh daripada membuka hyperlink

<a href="https://www.google-analytics.com/analytics.js"
download="file">download the google analytics javascript file with a
tag </a>

Tapi itu tidak berhasil, karena download hanya berfungsi untuk URL asal yang sama. Jika file tidak berasal dari sumber yang sama, browser akan membukanya, bukan mengunduhnya

Untungnya, atribut unduhan mendukung skema blob:

Menggunakan Blob untuk mengunduh file

Blob adalah singkatan dari Binary Large Object dan merupakan tipe data yang dapat menyimpan data biner. Jika kita menggunakan fetch untuk meminta data, respons dapat diubah menjadi tipe blob. Jadi langkah-langkah untuk mendownload file tersebut adalah

Gunakan fetch_ API untuk mengunduh file skrip
Ubah data menjadi tipe blob

Ubah objek gumpalan menjadi string dengan menggunakan

downloadFile('[https://www.google-analytics.com/analytics.js'](https://www.google-analytics.com/analytics.js'),
'gooleAnalytics.js')

0

Buat elemen <a>_ untuk mengunduh string

Menggunakan fungsi untuk mengunduh

downloadFile('[https://www.google-analytics.com/analytics.js'](https://www.google-analytics.com/analytics.js'),
'gooleAnalytics.js')

_

Anda dapat menguji di CodePen

See the Pen Download by bitbug (@bitbug) on{" "} CodePen.

Kesimpulan

Dengan meminta untuk mengunduh file dan mengubahnya menjadi bentuk blob, pembatasan lintas-domain browser dapat dihindari, tetapi saat mengunduh file besar, mungkin perlu waktu lama, dan pengguna harus diminta secara aktif untuk menghindari

Internet Explorer 11 tidak akan dapat diakses lagi setelah 14 Februari 2023. Jika ada situs yang Anda kunjungi memerlukan Internet Explorer 11, Anda dapat memuatnya kembali dengan mode Internet Explorer di Microsoft Edge. Kami menyarankan Anda menggunakan Microsoft Edge untuk pengalaman menjelajah web yang lebih cepat, lebih aman, dan lebih modern

Memulai dengan Microsoft Edge

Ada beberapa jenis file yang dapat Anda unduh dari web—dokumen, gambar, video, aplikasi, ekstensi, dan toolbar untuk browser Anda, antara lain. Saat Anda memilih file untuk diunduh, Internet Explorer akan menanyakan apa yang ingin Anda lakukan dengan file tersebut. Berikut adalah beberapa hal yang dapat Anda lakukan, bergantung pada jenis file yang Anda unduh

Buka file untuk melihatnya, tetapi jangan simpan ke PC Anda
Simpan file di PC Anda di lokasi unduhan default. Setelah Internet Explorer menjalankan pemindaian keamanan dan selesai mengunduh file, Anda dapat memilih untuk membuka file, folder tempat penyimpanannya, atau melihatnya di Pengelola Unduhan
Simpan sebagai nama file yang berbeda, jenis, atau lokasi unduhan di PC Anda
Jalankan aplikasi, ekstensi, atau jenis file lainnya. Setelah Internet Explorer menjalankan pemindaian keamanan, file akan dibuka dan dijalankan di PC Anda
Batalkan pengunduhan dan kembali menjelajahi web

Anda juga dapat menyimpan file yang lebih kecil—seperti gambar tunggal—ke PC Anda. Pilih kanan gambar, tautan, atau file yang ingin Anda simpan, lalu pilih Simpan gambar atau Simpan target sebagai

Temukan file yang telah Anda unduh di PC Anda

Pengelola Unduhan melacak gambar, dokumen, dan file lain yang Anda unduh dari web. File yang telah Anda unduh secara otomatis disimpan di folder Unduhan. Folder ini biasanya terletak di drive tempat Windows diinstal (misalnya, C. \users\nama Anda\download). Anda selalu dapat memindahkan unduhan dari folder Unduhan ke tempat lain di PC Anda

Untuk melihat file yang telah Anda unduh saat menggunakan Internet Explorer, buka Internet Explorer, pilih tombol Alat, lalu pilih Lihat unduhan. Anda akan dapat melihat apa yang telah Anda unduh dari web, tempat item ini disimpan di PC Anda, dan memilih tindakan yang akan dilakukan pada unduhan Anda

Ubah folder unduhan default di PC Anda

Buka Internet Explorer, pilih tombol Alat, lalu pilih Lihat unduhan
Di kotak dialog Lihat Unduhan, pilih Opsi di kiri bawah
Pilih lokasi unduhan default yang berbeda dengan memilih Telusuri lalu pilih Oke setelah selesai

Mengapa beberapa file tidak dapat dibuka di Internet Explorer

Internet Explorer menggunakan add-on seperti Adobe Reader untuk melihat beberapa file di browser. Jika file yang membutuhkan add-on tidak dapat dibuka, Anda mungkin memiliki add-on versi lama, yang perlu diperbarui

Tentang unduhan dan peringatan keamanan

Saat Anda mengunduh file, Internet Explorer memeriksa petunjuk bahwa unduhan tersebut berbahaya atau berpotensi membahayakan PC Anda. Jika Internet Explorer mengidentifikasi unduhan sebagai mencurigakan, Anda akan diberi tahu sehingga Anda dapat memutuskan apakah akan menyimpan, menjalankan, atau membuka file atau tidak. Tidak semua file yang Anda peringatkan berbahaya, tetapi penting untuk memastikan bahwa Anda memercayai situs tempat Anda mendownload, dan bahwa Anda benar-benar ingin mendownload file tersebut

Jika Anda melihat peringatan keamanan yang memberi tahu bahwa penerbit program ini tidak dapat diverifikasi, artinya Internet Explorer tidak mengenali situs atau organisasi yang meminta Anda mengunduh file. Pastikan Anda mengenali dan mempercayai penerbit sebelum menyimpan atau membuka unduhan

Selalu ada risiko mengunduh file dari web. Berikut adalah beberapa tindakan pencegahan yang dapat Anda ambil untuk membantu melindungi PC Anda saat mengunduh file

Instal dan gunakan program antivirus
Hanya unduh file dari situs yang Anda percayai
Jika file memiliki tanda tangan digital, pastikan tanda tangan tersebut valid dan file berasal dari lokasi tepercaya. Untuk melihat tanda tangan digital, pilih tautan penerbit di kotak dialog peringatan keamanan yang terbuka saat Anda pertama kali mengunduh file

Bagaimana cara mengunduh file lokal dalam HTML?

Tautan Unduhan HTML .

adalah tag tautan

atribut href mengatur file untuk diunduh

Unduh File adalah teks tautan

adalah tag akhir tautan

Bagaimana cara mengunduh file dari folder tertentu?

Di sebelah kiri, klik Download. Ubah pengaturan unduhan Anda. Untuk mengubah lokasi pengunduhan default, klik Ubah dan pilih tempat untuk menyimpan file Anda. Jika Anda ingin memilih lokasi tertentu untuk setiap unduhan, aktifkan Tanya tempat menyimpan setiap file sebelum mengunduh .

Bagaimana cara membuat tautan mengunduh file secara otomatis dalam HTML?

Cukup tambahkan kata “unduh” setelah URL href sebelum menutup tag . Misalnya, jika saya ingin orang mengunduh ikon cetak di bawah, saya akan menautkannya di email berformat HTML saya atau di halaman web/intranet saya menggunakan skrip yang mengikutinya.

Bagaimana Anda mereferensikan file lokal dalam HTML?

Untuk menautkan ke file target di direktori yang sama dengan file HTML pemanggil, cukup gunakan nama file, e. g. gambar-saya. jpg. Untuk mereferensikan file dalam subdirektori, tulis nama direktori di depan jalur, ditambah garis miring , e. g. subdirektori/gambar-saya. jpg.