Bagaimana saya bisa mengunduh situs web menggunakan javascript?

Mengunduh file adalah aspek penting dalam menjelajahi internet. Banyak file diunduh dari internet setiap hari, dari file biner (seperti aplikasi, gambar, video, dan audio) hingga file teks biasa

Jika Anda memiliki pengembang web dan ingin menambahkan fitur ini ke aplikasi Anda, inilah cara melakukannya

Kami akan memeriksa 3 pendekatan berbeda

• mode dasar hanya menggunakan elemen HTML;
• menggunakan JavaScript dengan Fetch API dan elemen HTML;
• menggunakan elemen XMLHttpRequest dan HTML, tetapi dalam skenario yang lebih kompleks di mana kami menerapkan sistem untuk mengukur kemajuan;

Metode pertama dan paling sederhana menyiratkan pembuatan elemen HTML jangkar yang memiliki atribut download

Menurut definisi, atribut download menentukan bahwa target (file yang ditentukan dalam atribut href) akan diunduh saat pengguna mengklik hyperlink

Juga dengan atribut download ini kita dapat menentukan nama baru file setelah diunduh. Oleh karena itu jika kita ingin mengunduh file dengan nama tertentu, kita dapat mengontrolnya menggunakan atribut ini. Namun, pengguna masih dapat mengubah nama saat jendela pengunduhan asli muncul, tetapi nama yang kami berikan akan menjadi default

Jika nilainya dihilangkan, nama file asli digunakan

Metode ini bagus ketika kita tidak perlu melakukan tindakan apa pun berdasarkan proses pengunduhan ini

Pada saat yang sama, kita dapat menggunakan metode ini meskipun kita tidak dapat merender elemen HTML jangkar, menggunakan JavaScript

Fungsi di atas melakukan hal yang sama, hanya saja kita membuat Elemen HTML jangkar dengan cepat, hanya untuk tindakan unduhan ini dan kemudian kita menghapusnya

• IMG_URL_ adalah URL gambar yang ingin kita unduh;
• FILE_NAME adalah nama baru file setelah diunduh;

Keterbatasan metode ini adalah bahwa ia harus mematuhi kebijakan asal yang sama, sehingga atribut ini berfungsi dengan baik untuk URL asal yang sama

Skenario umum adalah ketika Anda ingin mengunduh gambar dari server lain dan alih-alih mengunduhnya, browser akan membukanya di tab baru

Aspek utama dari metode ini adalah proses pengunduhan akan dimulai secara otomatis dan dapat dilihat secara native di browser

Perhatikan pada gambar di atas bagaimana proses pengunduhan dikirim ke browser untuk mengelolanya, dan browser memberikan kendali atasnya dan menunjukkan kemajuannya

Metode II

Metode kedua dan ketiga menggunakan teknik yang sama dengan elemen jangkar, tetapi alih-alih menyediakan URL gambar, kami mengonversi konten file menjadi Blob dan kemudian membuat DOMString darinya menggunakan metode createObjectURL

Perhatikan bahwa pada akhirnya kita telah menggunakan URL.revokeObjectURL , yang penting dalam hal manajemen memori. Saat menggunakan URL.createObjectURL URL objek baru dibuat, meskipun disebut dengan objek blob yang sama

Setiap kali URL objek dibuat, itu tetap ada selama seumur hidup dokumen yang dibuatnya. Browser akan merilis semua URL objek saat dokumen sedang dibongkar. Namun, penting bagi Anda untuk merilis URL objek kapan pun tidak diperlukan lagi untuk meningkatkan kinerja dan meminimalkan penggunaan memori

Aspek utama dari metode ini adalah proses pengunduhan akan dimulai secara otomatis, tetapi di dalam aplikasi kami dan akan diteruskan ke browser hanya setelah pengunduhan selesai.

Perhatikan di GIF di atas bahwa setelah kita mengklik tombol Unduh, sepertinya tidak ada yang terjadi, karena unduhan berlangsung sebagai tugas asinkron di aplikasi kita dan setelah selesai, itu akan diteruskan ke browser

Setelah jendela browser itu muncul dan kami mengklik simpan, file tersebut secara otomatis disimpan di komputer kami

Dengan metode ini sekarang kami dapat mengunduh semua jenis file terlepas dari server asalnya. Namun, masalahnya adalah karena pengunduhan dilakukan di dalam aplikasi kita, pengguna mungkin berpikir bahwa tidak ada yang terjadi saat dia mengklik dan oleh karena itu terserah kita untuk mengelola pengunduhan file besar dengan menerapkan pengukuran kemajuan

Pada saat yang sama, metode ini berguna saat kita perlu melakukan tindakan tertentu di dalam aplikasi kita setelah file selesai diunduh. Tampilkan pesan, kirim permintaan ke back-end render halaman baru, dan seterusnya…

Metode III

Metode ketiga mirip dengan metode kedua, kita masih akan menggunakan Blob dan createObjectURL, tetapi alih-alih menggunakan Fetch API, kita akan menggunakan XMLHttpRequest

Kami menggunakan XMLHttpRequest melalui Fetch karena saat ini Fetch API tidak menyediakan antarmuka untuk pengukuran progres, sementara XMLHttpRequest menyediakannya

Awal dan blok onreadystatechange mirip dengan fungsi kedua. Unduh respons sebagai objek Blob, buat DOMString, dan gunakan elemen jangkar untuk mengunduh file

Di dalamonprogress kami menggunakan nilai download0 dan download1 untuk menghitung progres dalam persentase dan waktu yang telah berlalu, serta kecepatan pengunduhan dan waktu yang tersisa

Perhatikan pada GIF di atas bahwa kita memiliki perilaku yang sama dengan metode kedua, hanya sekarang kita dapat memantau perkembangannya. Setelah file diunduh sepenuhnya, itu akan dikirim ke browser dan kemudian akan langsung disimpan ke disk

Masing-masing metode di atas mewakili pembaruan dari metode sebelumnya

Metode pertama adalah yang termudah. Dalam hal ini, kami cukup meneruskan proses pengunduhan ke browser untuk mengelolanya secara native. Metode ini adalah cara yang disukai saat aplikasi tidak harus melakukan tindakan tertentu berdasarkan status pemuatan

Yang kedua, kami mengelola unduhan secara internal dan mengirimkannya ke browser hanya setelah unduhan selesai. Dengan cara ini, kami dapat mengontrol unduhan di dalam aplikasi dan kami dapat bereaksi tergantung pada statusnya. Metode ini bekerja dengan baik untuk file kecil yang diunduh dengan cepat, tetapi ketika file terlalu besar, pengguna mungkin berpikir bahwa aplikasinya salah, jika tidak ada yang terjadi pada UI untuk menunjukkan kepada pengguna bahwa unduhan sedang berlangsung

Dalam metode terakhir, kami menerapkan pengukuran kemajuan kami sendiri, yang mirip dengan yang ada di browser

Bagaimana cara mengunduh halaman web menggunakan JavaScript?