Using Laravel and Vue.js to download a blank pdf file using an axios request

I am having an issue with downloading a PDF file from my Laravel application using axios. However, the downloaded PDF is coming up empty.

I have been using DomPdf to generate the PDF and download.js to initiate the download. Below is the code I have been using:

Note: It works perfectly fine when I try to download it without making an ajax request.

In Laravel:

return PDF::loadView('print', compact('bill'))->download($bill->number.'.pdf');
JavaScript:

axios.get(`/bills/${id}/print`, {
responseType: 'blob',
Accept: 'application/pdf'
})
.then(response => {
  const download = require('@/download');
  // @ is an alias for my root js directory.
  download(response.data, `file.pdf`, 'application/pdf');
});
javascriptlaravelvue.jsaxiosdompdf

Answer №1

Check out the code snippet below:

In your Laravel controller:

$pdf = PDF::loadView('finance.remainingFee', compact('fee', 'time'));
$pdf->setPaper('a4' , 'portrait');
return $pdf->output();

And in your Vue file:

axios.get(APP_URL + `api/finance/remainingStudentFee/${fee_id}`, {responseType: 'blob'}).then(response => {

    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'remaining_fee.pdf'); //or any other extension
    document.body.appendChild(link);
    link.click();

})
.catch(error => {
    console.log(error);
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to generate documentation for the useState function using typedoc?

In my code, I have a documented hook that returns a state along with multiple functions. While the functions are well-documented in typedoc, the status in the final documentation is simply displayed as a boolean without any description. export default func ...

javascriptreactjstypescriptjsdoctypedoc

Awaiting the completion of Promises within a for-loop (Typescript)

I'm struggling with a for-loop and promises in my angular2 project. I have multiple methods that return promises, and after these promises are resolved, I want to populate an array in the class using Promise.all(variable).then(function(result){....... ...

javascriptangulartypescript

Verifying if the checkbox has been unselected

I'm currently attempting to send post requests to the database based on whether a checkbox is checked or unchecked. My goal is to add or delete data in the database using these post requests. I've successfully implemented the logic to add data us ...

javascriptjqueryhttp-post

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Trying to figure out how to make the navigation bar close when a link is clicked and directed to a section instead of a new page. When on a large screen, I want the nav bar to remain open but automatically close when on a small screen (for example, when th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issues with grunt - Alert: Task "ngAnnotate:dist" has encountered an error. Proceed using --force option

Encountering an unexpected issue with a Grunt task that previously ran smoothly. The error message is as follows: Running "ngAnnotate:dist" (ngAnnotate) task Generating ".tmp/concat/scripts/scripts.js" from: ".tmp/concat/scripts/scripts.js"...ERROR >& ...

javascriptnpmgruntjsng-annotate

What is the best way to transform my arrays into objects or JSON through web scraping?

What is the most efficient method for transforming a scraped data array? [ 'item 1', 'item 2', 'item 3', 'item 4'] [ '$99', '$99', '$99', '$99'] ...

javascriptarraysjsonobjectweb-scraping

Tips for addressing the Stale Element Reference Exception when locating an element in JMeter

Trying to locate an element with a structure similar to the following: <div> <div> <div> <ul> <object id = "obj" #document (link here) <html> <head> </head> ...

javascriptselenium-webdriverautomationjmeterstaleelementreferenceexception

A more efficient method for tallying values within an object (JavaScript, React)

Is there a more efficient way to determine the count of items with a specific key/value pair in a React state? When the list is large, this method may become a bottleneck. To illustrate the question, consider the following simplified example: class App ...

javascriptarraysobjectreactjs

Exploring the distinctions in e2e testing for select (dropdown), input radio, and input checkbox elements within AngularJS

In AngularJS, testing form attributes can be a bit inconsistent. While the updated e2e testing with Protractor helps, those still using older versions may struggle. I am interested in understanding the differences between: Ways to select items: 1a. Selec ...

javascriptangularjscheckboxdrop-down-menuradio-button

Encountering issues while trying to run Nuxt locally with HTTPS due to a problem with the n

Currently, my objective is to run nuxt locally with HTTPS in order to test some geolocation functionalities. (https://nuxtjs.org/, https://nuxtjs.org/api/nuxt) I have been following a tutorial available at: In addition, I came across this resource as wel ...

vue.jshttpsservernuxt.js

A guide on adjusting a function to pause execution until a line is complete

In the code snippet below, there is an angularJS function named myFunc: $scope.myFunc = () => { myModule.getConfig().update(params); myModule.go(); myModule.log('ok'); }; Additionally, there is a go function defi ...

javascriptangularjs

Incorporate a dynamic fading effect for text and images using JQuery

I successfully implemented a Crossfade effect using Jquery: function doAnimationLoop(o, n, t, i, a) { fadeInOut(o, n, t, i, function() { setTimeout(function() { doAnimationLoop(o, n, t, i, a) }, a) ...

javascriptjqueryhtmlcss

Execute React program within VM Azure

After setting up my React application on Azure's virtual machine, I encountered an issue. When trying to access the public URL (DNS) of the VM, I received a "site can't be reached" message. This is the process I followed to launch my project on ...

javascriptnode.jsazureazure-virtual-machine

How can I dynamically append content to the DOM when a user clicks?

On my form, I have an input field that allows users to click an add button and a new input field will appear below it, with the option to repeat this process indefinitely. However, I am facing an issue with adding an input field to the DOM upon a click eve ...

javascripttypescriptvue.js

There seems to be an issue with declaring Gulp Open

Here is the code snippet for my `open.js` task: import gulp from 'gulp'; import gulpOpen from 'gulp-open'; gulp.task('open', () => { // doesn't work with `function()` either. const options = { uri: 'local ...

javascriptnpmgulp

Utilize Google Apps Script to clear all filters on Google Sheets

Instead of reviving an old thread that was posted years ago, I decided to start a new one. You can find the original thread here. In the previous discussion, I discovered the script I needed to remove filters in a sheet: function clearFilter() { var ...

javascriptgoogle-apps-scriptgoogle-sheets

The animations in my CSS are not functioning properly on iOS gadgets

I am facing an issue with my CSS and JS code. When I slide down the page, my logo should appear from the left with opacity set to 0. However, when I scroll back up to the top, the logo is supposed to move back to its original position on the left and have ...

javascripthtmlcssreactjssass

The error message is failing to display the mat error

I've implemented the Mat control date range input control in my project and I'm facing an issue regarding displaying an error message when the user forgets to enter either the start date or end date. Below is the HTML code: <mat-form-field> ...

javascriptc#angularjsangular12

Can someone explain the significance of this error message in Redux - Toolkit?

Encountered this error message while working with Redux-Toolkit, could someone explain its meaning? name:"ConditionError" message:"Aborted due to condition callback returning false." ...

javascriptreduxreact-reduxredux-toolkit

Sorting a function with two parameters in descending order is possible even when dealing with an empty array and no initial value for reduction

My npm test is not passing the third out of six tests. I have attempted to sort it using the following code snippet: sumAll.sort(function(min,max)) { return max - min; } However, this approach did not work. I also tried incorporating conditionals in t ...

javascriptnpmjestjs