September 26, 2024 axios javascript

Cara Download File Dari Response Axios Di Browser

Cara download file dari response axios di browser bisa dilakukan dengan langkah-langkah berikut:

Set responseType pada request axios ke blob.

const res = await axios.get('https://localhost:3000/public/invoice.pdf', {
    responseType: 'blob'
})

Buat url untuk file blob dari response axios dengan URL.createObjectUrl .

const href = URL.createObjectURL(res.data)

Buat sebuah link dengan atribut href ke url yang telah dibuat dan atribut download berisi nama filenya.

const link = document.createElement('a')

link.href = href
link.download = 'invoice.pdf'

Trigger klik download pada link.

link.click()

Hapus url file blob yang telah dibuat.

URL.revokeObjectURL(href)

Hasil akhir.

async function download() {
    const res = await axios.get('https://localhost:3000/public/invoice.pdf', {
        responseType: 'blob'
    })

    const href = URL.createObjectURL(res.data)

    const link = document.createElement('a')

    link.href = href
    link.download = 'invoice.pdf'

    link.click()

    URL.revokeObjectURL(href)
}

download()