Cara mudah download file dengan javascript axios dan fetch

Artikel ini akan membahas bagaimana cara untuk men-download file dengan menggunakan javascript, baik dengan library axios maupun fetch.

Axios adalah salah satu library promise-based HTTP Client paling populer untuk node.js dan browser . Promise-based artinya, axios dapat digunakan dengan struktur then catch atau dengan async await, sehingga jauh lebih mudah jika dibandingkan dengan struktur callback.

Sedangkan fetch adalah sebuah method/api yang secara native sudah disediakan oleh semua Browser modern yang berfungsi untuk mem-fetch atau mengakses resources secara promise-based, seperti halnya axios.

Jadi secara umum, Axios dan Fetch dapat dan biasa digunakan untuk berkomunikasi dengan rest api server atau yang sejenisnya. Hanya saja memang Axios lebih populer jika dibandingkan dengan Fetch karena memiliki lebih banyak konfigurasi dan fungsi yang dapat mempermudah banyak hal.

Download file resources dengan menggunakan Axios dan Fetch

Seperti disebutkan di atas, Axios dan Fetch biasa digunakan untuk berkomunikasi dengan rest api, misalkan untuk mengambil suatu data dalam format Json. Namum, dalam beberapa kesempatan, diperlukan juga untuk dapat mengambil data yang berupa file biner, misalkan file pdf, xlsx atau sejenisnya, dan harus menyertakan header Authorization. Dimana hal ini tidak bisa dilakukan oleh link anchor.

Berikut ini adalah cara bagaimana menggunakan axios dan fetch untuk mendownload suatu file, dengan ketentuan harus menyertakan header Authorization. Untuk contoh ini, header Authorization dibuat sederhana yaitu harus bernilai

Di sini Penulis asumsikan Anda sudah tahu bagaimana cara menambahkan atau menggunakan package axios ke dalam project. Dan contoh ini dibuat dengan Vue 3. Namun jangan khawatir, Anda bisa mengubahnya menjadi vanilla javascript dengan mudah.

Download file dengan Axios

Hal yang perlu diperhatikan dalam menggunakan Axios untuk mendownload file, adalah sebagai berikut:

1. Pastikan response type adalah arraybuffer. Kenapa arraybuffer dan bukan blob, karena request nya bisa jadi error, misalkan error karena not authorize atau sejenisnya, sehingga response-nya harus bisa di ubah menjadi json.
2. Tambahkan transformResponse untuk mengubah data yang diterima menjadi blob jika sukses atau json jika error
3. Buat link anchor dengan url di set sebagai blob
4. Set attribute download dengan nama file yang diinginkan
5. Klik link dengan method click

<script setup>
import axios from "axios"
import { ref } from "vue";

const URL_API = import.meta.env.VITE_URL_API;
const AUTH = "xDMHorSbsrvcBlWVAKvO"
const lastError = ref("")

const downloadFileAxios = async () => {
    try {
        lastError.value = ""
        var dt = await axios({
            url: `${URL_API}/file`,
            method: 'GET',
            headers : {"Authorization": AUTH },
            // isi respone type dengan array buffer karene respone bisa file/blob atau json
            responseType: 'arraybuffer',
            transformResponse: (data, _, status) => {
                // ubah data menjadi tipe yang sesuai dengan melihat http status nya
                return status == 200 ? window.URL.createObjectURL(new Blob([data])) : JSON.parse(String.fromCharCode.apply(null, new Uint8Array(data)))
            }
        })

        const link = document.createElement('a');
        link.href = dt.data;
        link.setAttribute('download', 'berkas.pdf');
        document.body.appendChild(link);
        link.click();
    } catch (error) {
        lastError.value = error.response?.data?.message ?? "Gagal download file"
    }
}
</script>

Yang perlu diperhatikan adalah pada kode transformResponse berikut ini. Yang dilakukan transformResponse ini adalah untuk mengubah data response menjadi data yang sesuai. Jika sukses (ditandai dengan status = 200), maka data yang semula arraybuffer harus diubah menjadi blob. Dan jika request error, maka data diubah menjadi json.

transformResponse: (data, _, status) => { // ubah data menjadi tipe yang sesuai
    dengan melihat http status nya
    return status == 200 ?
        window.URL.createObjectURL(new Blob([data])) :
        JSON.parse(String.fromCharCode.apply(null, new Uint8Array(data)))
}

Download file dengan Fetch

Hal yang perlu diperhatikan dalam menggunakan Axios untuk mendownload file, adalah sebagai berikut:

1. Pastikan cek response.ok untuk mengetahui apakah request berhasil atau error
2. Jika request sukses, maka konversi response menjadi blob dengan response.blob(), ingat proses ini menghasilkan promise
3. Buat link anchor dengan url di set sebagai blob
4. Set attribute download dengan nama file yang diinginkan
5. Klik link dengan method click

<script setup>
import { ref } from "vue";

const URL_API = import.meta.env.VITE_URL_API;
const AUTH = "xDMHorSbsrvcBlWVAKvO"
const lastError = ref("")

const downloadFileFetch = async (flag) => {
    try {
        lastError.value = ""
        var blob = null
        var response = await fetch(`${URL_API}/file`,{
            method: "GET",
            headers : {"Authorization": AUTH},
        })

        if (response.ok) {
            blob = await response.blob()
        } else {
            throw response
        }
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'berkas.pdf');
        document.body.appendChild(link);
        link.click();
    } catch (error) {
        var e = await error.json()
        lastError.value = e.message ?? "Gagal download file"
    }
}
</script>

Yang perlu diperhatikan dalam menggunakan Fetch ini adalah, bawah proses konversi response menjadi blob atau json adalah menghasilkan promise, sehingga perlu di await.

Kesimpulan

Baik Axios maupun Fetch, keduanya dapat digunakan untuk men-download file dengan mudah. Namun, Fetch tampak lebih mudah dan sederhana jika dibandingkan dengan Axios.

Demo aplikasi