Export selected columns to excel using Vue

Question

I am newbie to Vue.js.I am trying to export some data to excel file but i don't want all of the data columns to be exported. Rather i need to select few columns.I tried using map function but no luck.Any help really appriciated.Here is my code

exportTo() {
        this.form.exportExcel = true
        axios.post(route('report'), this.form,
        {
          responseType: 'blob',
        })
        .then((response) => {
          console.log(response)

          const result = response.data.data.map((item) => {
            return {
              Name: item.firstname + ' ' + item.middlename+ ' ' + item.lastname,
              Address: item.table2.res_address+ ' ,' + item.table2.res_city+ ' ,' + item.table2.res_state+ ' ,' + item.table2.res_pincode,
              Mobile : item.phone,
              Email : item.email,
              Place : item.table2.place,
              Gender : item.gender,
              DOB : item.birthdate
            };
          }); 

          console.log(result);

            const url = window.URL.createObjectURL(new Blob([result]));
            const link = document.createElement('a');
            link.href = url;
            var datetime = new Date().getTime()
            link.setAttribute('download',datetime+'reportdata.xlsx'); 
            document.body.appendChild(link);
            link.click();
            this.form.exportExcel = false
        
        })
        .catch((error) => {
            this.form= []
        })
    },

The response data is something like this

{
   "data":{
      "current_page":1,
      "data":[
         {
            "id":17198,
            "f_id":003,
            "firstname":"ABC",
            "middlename":"M",
            "lastname":"XYZ",
            "phone":"1234567899",
            "email":"xyz@gmail.com",
            "faxno":"",
            "company_url":"",
            "birthdate":"2012-03-06",
            "gender":"FEMALE",
            "mobile":"1234567899",
            "created_at":"2022-01-28T18:05:11.000000Z",
            "updated_at":"2022-07-21T11:33:14.000000Z",
            "table2":{
               "id":18845,
               "f_id":003,
               "vip_no":950,
               "place":"Mumbai",
               "res_address":"Q110 Madhav Heights
 Goregaon West",
               "res_city":"Mumbai",
               "res_state":"Goa",
               "res_country":"",
               "res_pincode":"4000",
               "alt_address":"Test address223",
               "alt_city":"Testcity",
               "alt_state":"Kerala",
               "alt_country":"",
               "alt_pincode":"4000",
               "f_email":"cde123@gmail.com",
               "created_at":"2022-04-12T11:41:11.000000Z",
               "updated_at":"2022-04-12T11:41:11.000000Z"
            }
         },

As you see in the code I am trying to export only name,address,mobile,email. Actually my response data is larger than what I have put.So direct export to excel doesn't work. It gives me "Excel cannot open the file because of the file format or file extension is invalid".

Export selected columns to excel using Vue

0 Answers