Hi All
Version 7.18 beta
I'm developing a Nodejs system which has a requirement to produce a lot of PDFs. The PDFs are stored in a folder outside the public folders. I have a repeat table which shows all the pdfs. When I click on a button I want the user to be able to view the pdf. I am using a file download server action.
This triggerd from the button, in the repeat table. When I click the button nothing happens , a quick look on Dev tools I can see the action is completing
Only when I click on the blue initiator (DMXAppConnect) does it then download and display in another window. It feels like I'm not triggering correctlyany ideas?
In order to download the file, you need to call the path/url of your server action using a href= and not call the server action via dynamic event in button click.
Set up a new route in Wappler route manager, pointing to your download server action,
On your webpage, style the anchor tag like a button,
a.download-button {
display: inline-block; /* Allows setting width and height */
padding: 10px 20px; /* Adjust padding as needed */
background-color: #007bff; /* Example background color (blue) */
color: white; /* Text color */
text-decoration: none; /* Remove underline */
border: none; /* Remove default border */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Change cursor to pointer on hover */
font-size: 16px; /* Adjust font size */
font-weight: bold; /* Make the text bold */
transition: background-color 0.3s ease; /* Smooth transition on hover */
}
a.download-button:hover {
background-color: #0056b3; /* Darker background on hover */
}
a.download-button:active {
background-color: #004085; /* Even darker background on click */
}
Point the href to your new download server route,
Add target="_blank" inside your anchor tag. This will keep your existing window open and most browsers will automatically close the new window when the download is finished,
Add download="" inside your anchor tag as this also helps with some browser behaviors
Hi Teodor, this solution doesn't work if the data to be download is dynamic.
in my case I have filtered list that I want to export. I can see the CSV created in the directory with the correct filtered data. But when I set the Anchor button's href to the path/url of the server action as stated above, I get all the data in the table downloaded into the CSV which is not what I want.
Server Action works fine.
on the page, i added an anchor button. Then added onclick dynamic event for the anchor botton that loads the ServerAction with all its GET filters.
The above creates the CSV file to be downloaded with the correct data in designated directory which is /assets/exports/ which makes my complete path /assets/exports/FilteredDelegates1753893435.csv
When I try to set href of the AnchorButton to the route I created, Wappler does not allow me to.
How do I get this to work.
I can confirm the right data is downloaded into the directory when I run the server action. Now how do I download that file to the browser. I have tried everything I can think of.
Please explain this more detailed - what do you mean Wappler does not allow you?
This is the correct method to create a file download. Just make sure you pass the correct export path to the download action in your server action.
Nothing happens on the interface. It is as if wappler doesn't know what to do with the routes link. Nothing is inserted in the field. Here is a video of what I mean https://youtu.be/MSX37Aa6nsA .
See that after I select the route, the field is not updated.
