Excel Export with Vue.js | Lets Build Some Datatables With Laravel and Vue.js

hey guys the vinsharma here so in our previous video we discussed about the sort functionality using viewjs so in this video we'll be working on exporting the the data to an excel file so whenever i select these multiple records and click on export then these data should be exported to an excel file we'll be implementing that in this video so for that we'll be using a package called laravel excel so let's go ahead and install that laravel package i'll just open up the terminal and paste that and i'll be right back once this finishes installing so the package has been installed and the next step that we'll be doing here is let's go ahead and define a route so that will be route get students export and we'll be using an array of students we'll be passing an area of students to this route in order to export that those records to an excel file so we have multiple ways of doing this and i tried them and it's quite hectic to deal with laravel excel on vgs since we need to uh we need to implement everything on the front and side using vue.js so we either have to use a vue.js package or something like that and convert that to a json object and then export that data to excel file but i found a workaround for that we'll be using so what we'll be doing is we'll be sending an array of we'll be sending an area of students data to the route and then we'll on the clock controller site we'll export those array of ids we'll use the array of ids press the data from the database and then export that data to the excel file so whenever we make a request to the student's export with the id of student we want to go to studentcontroller class and let's define a function called export we will be defining that function later so first let's go ahead to our documentation and check out the exports and we'll be using from query since we need to query the database so for that first let's go ahead and create a new export file so php artisan make export i'll be naming that students export hit enter so our export file has been created configuration file has been created in the exports folder inside app directory so here what we'll be doing is we'll be using exportable since we need to query the database so we need to use these traits and we'll also be using from query let me remove these and let's also import these and here we need the query function okay what we can do is let me just copy this public function query and we also need to use the constructor here which will be used to receive the area of students what we need to do here is we need to query the student model query and we'll be querying the database using key so where key is let me just define the constructor first function and we'll be receiving an area of students and we also need to define a protected student here which we'll be assigning in here in our constructor so this let's name that students so this students will be equal to the students area that we received from our constructor and then what we'll be doing here is where key is since we are using the variable defined here so we need to use this keyword for this students and the next step that we'll be doing is since we have defined the export configuration file for our students let's go ahead to our student controller and define a new function here so we need to name our function as export and we are receiving the students value students ids here so the way we get the ids from the student is in the is in the form of string and not actually in the form of array as you have already seen in the deleting multiple records part what we did was we actually got a string of student id so we need to convert that to an array so we use explore function so what we'll be doing in this case as well is we'll be using the explore function to convert that array to uh to convert that student's string to an address so students array and then the way we export those file export those data to an excel file is by using this command so whenever we go to the export function what we'll be doing is we'll be returning a new student's export and here we need to pass an array of students so that will be students array and let's name the file as students.xlsx so this will be an excel file so our backend part has been done now let's go to the students index.view and in here what we want to do is whenever i click on the export button then i want to export that data to an excel file let's navigate to the export button and in here what i'll be doing here is i'll be defining a new property called url and this url is actually dynamic we'll be building this url whenever anything in the ui changes so whenever the user clicks on these multiple buttons then we need to generate the url where the students id are added to that url we need to make it dynamic so this value will be dynamic so for that we are defining it that in a property and let's go ahead and define that url in our data so this will be url so this url property will be empty by default and what we want to do is whenever the array of the whenever the value of the checked array changes then we want to update our url property as well so since we are selecting multiple records from our table and then we want to export these to our excel file then whenever the user clicks on these items then we also want to update the url value so for that what we need to do is we need a watch property defined for our checked array so before that let's go ahead to our watch object and here we want to watch for the checked array so whenever that changes then what i want to do here is we don't need the value here but what i want to do here is i want to reassign the url property so this url will be since we have defined the url in our api.php so we want to go to slash ebr student slash export let's go ahead and here define slash api slash student slash export and then what i want to do is i want to pass an array i want to pass the checked array here so that will be this dot check so now if i save that and go ahead and reload the browser and now if i select two items then click on export and as you can see on the bottom left of the browser you can see the url been been built up so we are exporting for the students id of 13 and 14 so these are two records and if i click on two more and then go ahead and hover on the export button as you can see we are exporting records for four students so this is working fine and so whenever i click on the export button then it is going to hit this api route so api students export with the value of this checked and this is not an array actually so we are converting that to an array in our api students controller.php so it hits this api route we get these uh student ids in the form of string we convert that to an array and then we return a new student export we pass the student's array here and with the name of student.xlsx and on the students export what we are doing is we are receiving that value in the students on our constructor and assigning that to a variable called students which we defined on our export file and then we are running a query and exe and we are searching through the students model where the key matches these students that we receive from the parameter so let's go ahead and save everything and now the final thing is the testing phase so with this what we can do is we can select all and then we are exporting the data of 10 students so if i click on export then as you can see we get a pop-up to save that file and i want to save that on the downloads folder so now if i go ahead and open it up this should work fine and as you can see these uh records are exported successfully so this much for this series and if i feel like adding some extra features or if i find in adding a few if i find any features to be added here then i'll keep update uh then i'll keep updating this series in the future as well i hope you like the content and if you like it then do subscribe to the channel to stay updated and i'll be posting some more videos in the future stay tuned for that and i'll see you in the next one

Channel: Tapan Sharma

Views: 3,252

Keywords: laravel and vue.js datatables, livewire pagination, vue.js excel export tutorial, laravel excel export, laravel and vue.js for beginners, export selected data to excel with vue.js, vue.js search, laravel tutorial, excel export with vue.js, tapan sharma, filtering using vue.js, bulk delete using laravel, livewire tutorial, vue.js and laravel excel tutorial, laravel, vuejs, export data to excel using vue.js, vue

Id: o-PQF9GVTWo

Length: 9min 42sec (582 seconds)

Published: Mon Apr 19 2021