To trigger a CSV export and download from a Vue component, you can simply create a link that points to the export URL and let the browser handle the file download. You don't need to use Vue Router for this since it's not a navigation action but a file download action.
Here's how you can modify your Vue component to include a link that triggers the CSV export:
<template>
<div>
<!-- ... other parts of your template ... -->
<!-- Export button -->
<a :href="exportUrl" class="px-2 py-2 bg-indigo-600 text-white rounded-md">Export</a>
</div>
</template>
<script>
export default {
data() {
return {
start: '2023-01-01', // Example start date
end: '2023-01-31', // Example end date
};
},
computed: {
exportUrl() {
return `/admin/reports/myreport/export/${this.start}/${this.end}`;
},
},
// ... other parts of your script ...
};
</script>
<style>
/* Your styles here */
</style>
In this example, the exportUrl computed property dynamically generates the URL for the export link based on the start and end data properties. When the user clicks the "Export" link, the browser will navigate to the URL, and the Laravel backend will trigger the CSV download.
Make sure that your start and end values are formatted correctly and match the expected format in your Laravel route.
Also, ensure that your web server and Laravel application are configured to handle file downloads correctly, and that the Excel::download method is returning the correct response headers for a file download.
If you need to trigger the download without navigating (e.g., using an AJAX request), you would need to handle the response on the client side and create a Blob object to download the file, but this is more complex and not necessary for simple CSV exports.
