Cara mudah download file dengan javascript axios dan fetch

Axios adalah salah satu library promise-based HTTP Client paling populer untuk node.js dan native javascript. Axios juga sudah mendukung 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 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. Namun, dalam beberapa kesempatan, diperlukan juga untuk dapat mengambil data yang berupa file biner, misalkan file pdf, xlsx atau sejenisnya, dan masalahnya file-file tersebut biasanya adalah private sehingga harus menyertakan informasi login atau biasanya dalam bentuk header Authorization. Dimana hal ini tidak bisa dilakukan oleh link anchor biasa.

Berikut ini adalah cara menggunakan axios dan fetch untuk mendownload suatu file private, dengan menyertakan header Authorization. Untuk contoh ini, header Authorization dibuat sederhana yaitu harus bernilai. Di praktek nyata, header ini berbentuk token jwt.

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

Urutan Algoritma men-download file dengan axios kurang lebih 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. 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

Berikut ini adalah urutan algoritma untuk men-download file dengan menggunakan fetch:

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, bahwa 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.

GitHub - meshwara/download-file-via-axios-fetch

Contribute to meshwara/download-file-via-axios-fetch development by creating an account on GitHub.

GitHubmeshwara