Dear Expert.
I’m building Web client project.
In which, I need export some data into excel file from web client.
I don’t know how can I do that because.
Hi Thanos,
We have prepared an example project for you, demonstrating how to generate a .csv file on the client side.
The example contains two methods: one prepares the file for download, and the other extracts data from a DataGrid. The parameter used by the second method is the Uid, which you can edit and obtain from the Design tab, as shown in the following image.
Below is the link to download the example project.
If you have any questions, we are available.
Best Regards,
Bruno Nunes.
Dear Expert.
Thanks for your support.
csv format isn’t my target, because csv format has many limitations.
My target is xlsx file.
In other software which use javascript as VB code, I can use excel.js library and working with xlsx file easily. But, I don’t know how can i use it in factory studio.
Or do you have any other solutions in order to working with xlsx file ?
Best
Hi Thanos,
In your code, on line 46, you can replace var fileName = ‘NEWReport01.csv’; with var fileName = ‘NEWReport01.xlsx’;. This should solve your problem.
In tests conducted in our laboratory, the .xlsx file was generated successfully.
Could you please perform the test and provide us with feedback if this solution works for you?
If you have any questions, we are available.
Best Regards,
Bruno Nunes.
Dear expert
Thank for your feedback.
Did you try to open xlsx file after download.
I tried to do that. But the value of content variable not compatible with with xlsx file. So the open procedure had error.
Please check
Best.
Hi Thanos, could you try using the following code?
this.SaveXLSX = function(sender, e)
{
const DataToSave = this.extractDataJSON('myGrid');
this.DownloadXLSX(DataToSave);
}
this.extractDataJSON = function(gridID)
{
let myGrid = this.CurrentDisplay.GetControl(gridID);
let dt = myGrid.GetItems();
const jsonData = [];
// Iterates through the rows of the table
for (let l = 0; l < dt.Rows.Items.length; l++) {
// Cria um objeto para armazenar os dados de uma linha
const rowObject = {};
// Iterates through the colums of the table
for (let c = 0; c < dt.Columns.Items.length; c++) {
// Gets the column name
const columnName = dt.Columns.Items[c].columnName;
// Gets the corresponding value in the current row.
const cellValue = dt.Rows.Items[l].values._items[c];
// Adds the key-value pair to the row object.
rowObject[columnName] = cellValue;
}
// Adds the row object to the jsonData array
jsonData.push(rowObject);
}
return jsonData;
}
this.DownloadXLSX = function(DataToSave)
{
// Create a new spreadsheet
const newSpreadsheet = XLSX.utils.json_to_sheet(DataToSave);
// Create a new workbook
const newWorkbook = XLSX.utils.book_new();
// Add the spreadsheet to workbook
XLSX.utils.book_append_sheet(newWorkbook, newSpreadsheet, "People");
// Convert the workbookto blob
const workbookBlob = XLSX.write(newWorkbook, { bookType: 'xlsx', type: 'array' });
// Create a Blob object from array buffer
const blob = new Blob([workbookBlob], { type: 'application/octet-stream' });
//Use the FileSaver.js do download
saveAs(blob, 'dados.xlsx');
};
Some info about the code:
The example above performs data extraction from a DataGrid directly in the web client, extracts this data into JSON, and then downloads it as an .xlsx file.
The argument used in the first line of the SaveXLSX method is the uid of the DataGrid. You can obtain it by double-clicking on the DataGrid containing the data you want to generate the .xlsx file.
Add an HTML component to import two external JS libraries.
3.1 Navigate to the drawing environment and select the specific HTML page.
3.2 - On the left toolbar, select “insert component” as shown in the following image:
https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js
https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
Let me know if it works for you.
Best Regards.
Welliton Rafael.