Vue.js and Axios slow at fetching pdf

  axios, laravel, pdf-generation, vue.js

I’m having trouble with Vue.js and Axios to fetch pdfs in my Laravel app.

When ever a user clicks this button:

<a @click="fetchData()"><i class="fas fa-file-download mouse-pointer"></i></a>

My fetch method is being called in Vue.js:

methods: {
        fetchData() {
            axios.get(this.fetchUrl, {responseType: 'arraybuffer'})
                .then(response => {
                    let blob = new Blob([response.data], { type: 'application/pdf' })
                    let link = document.createElement('a')
                    link.href = window.URL.createObjectURL(blob)
                    link.stream = 'Faktura nr. ' + this.invoiceId + '.pdf'
                    link.click()
                })
        }
    },

Which the calls the backend controller for the information from three tables:

public function download($id)
{
    return PDF::loadView('app.pdf.invoice', [

        'invoice' => Invoice::find($id),

        'student' => User::find(Auth::user()->id),

        'company' => Company::find(Auth::user()->companies_id),

    ])->stream("'Faktura nr.' $id '.pdf'");

}

Then the information is sent to the ‘fetchData’ method, that produces the PDF.

But it takes almost 2 minutes for the pdf to be created. What can I do to make the call faster?

Source: Laravel

Leave a Reply