vue 3 Grid Excel Export from DataSource

[Andrea]

Hello there!

Many examples show how to export data from the grid, specifically using the saveExcel method, using local data.  How do you do it using a remote DataScource?

[Petar]

Hi Andrea,

I've used this example from our demos as a basis to implement this StackBlitz project. 

The example has the following function that is executed when the "Export Excel" button is clicked. 

exportExcel() {
  var that = this;

  fetch(
    "https://demos.telerik.com/kendo-ui/service-v4/odata/Orders?$count=true&$skip=0",
    this.init
  )
    .then(response => response.json())
    .then(json => {
      that.requestInProgress = false;

      const total = json["@odata.count"];
      const data = json["value"];
      const orders = new Array(total).fill().map((e, i) => ({ Index: i }));

      data.forEach((order, i) => {
        orders[i] = { Index: i, ...order };
      });

      saveExcel({
        data: orders,
        fileName: "myFile",
        columns: [
          { field: "Index" },
          { field: "OrderID", title: "Order ID" },
          { field: "ShipCountry", title: "Ship Country" },
          { field: "ShipName", title: "Ship Name" }
        ]
      });
    });
}

What e do with the above implementation is to fetch all data available in the remote datasource, store it in a variable and then export this data to an Excel file. 

Check the provided example and let me know if you have any questions about the provided implementation.

Regards,
Petar
Progress Telerik