You need to sign in to do that
Don't have an account?
Rebekah Lilly
Export LWC Table to Excel using XLSX format.
I have a fairly simply program that I am using to retreive some records via Apex and then allow the user to filter them in the JS controller. I also have an Export List button that is currently allowing them to download the list they have filtered as a CSV file. The problem is that leading zeroes do not show up in Excel. This is not an LWC or Salesforce issue, but an issue with how Excel handles the data. I would like to create a real XLSX file. Is there a way to do this natively? Or will I need to use a third-party library? What would be the recommended library to use? xlsx.js?
Thanks,
Rebekah
handleExport() {
let rowEnd = '\n';
let csvString = '';
this.exportHeader.forEach(element => {
csvString += element + ',';
});
csvString += rowEnd;
this.orders.forEach(record => {
csvString += Customer__c + ',';
csvString += '"' + record.ShipToLocationID__c + '",';
csvString += '"' + record.PONumber__c + '",';
if (record.POLineNumber__c == undefined) {
csvString += ' ,';
} else {
csvString += record.POLineNumber__c + ',';
}
if (record.CustomerItemNumber__c == undefined) {
csvString += ' ,';
} else {
csvString += '"' + record.CustomerItemNumber__c + '",';
}
csvString += '"' + record.ItemNumber__c + '",';
csvString += '"' + record.CONumber__c + '",';
csvString += '"' + record.ERP_ProductItem__r.ItemDescription__c + '",';
csvString += record.PromisedDeliveryDate__c + ',';
csvString += record.COLineNumber__c + ',';
csvString += record.ItemOrderedQuantity__c + ',';
csvString += record.OpenQuantity__c + ',';
csvString += record.UnitPrice__c + ',';
csvString += record.ExtendedPrice__c + ',';
csvString += rowEnd;
});
var element = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvString);
let downloadElement = document.createElement('a');
downloadElement.href = element;
downloadElement.target = '_self';
downloadElement.download = 'Sales Order Lines.csv';
document.body.appendChild(downloadElement);
downloadElement.click();
}
Thanks,
Rebekah
handleExport() {
let rowEnd = '\n';
let csvString = '';
this.exportHeader.forEach(element => {
csvString += element + ',';
});
csvString += rowEnd;
this.orders.forEach(record => {
csvString += Customer__c + ',';
csvString += '"' + record.ShipToLocationID__c + '",';
csvString += '"' + record.PONumber__c + '",';
if (record.POLineNumber__c == undefined) {
csvString += ' ,';
} else {
csvString += record.POLineNumber__c + ',';
}
if (record.CustomerItemNumber__c == undefined) {
csvString += ' ,';
} else {
csvString += '"' + record.CustomerItemNumber__c + '",';
}
csvString += '"' + record.ItemNumber__c + '",';
csvString += '"' + record.CONumber__c + '",';
csvString += '"' + record.ERP_ProductItem__r.ItemDescription__c + '",';
csvString += record.PromisedDeliveryDate__c + ',';
csvString += record.COLineNumber__c + ',';
csvString += record.ItemOrderedQuantity__c + ',';
csvString += record.OpenQuantity__c + ',';
csvString += record.UnitPrice__c + ',';
csvString += record.ExtendedPrice__c + ',';
csvString += rowEnd;
});
var element = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvString);
let downloadElement = document.createElement('a');
downloadElement.href = element;
downloadElement.target = '_self';
downloadElement.download = 'Sales Order Lines.csv';
document.body.appendChild(downloadElement);
downloadElement.click();
}
Promise.all([loadScript(this, workbook + "/xlsx.full.min.js")]) ( if you create a direct zip like me of xlsx.full.min.js without folder )
Two missing classes indeed: getAccountList (without "s" ) getContactList without "s"
Promise.all([loadScript(this, workbook + "/xlsx.full.min.js")])
Download ok of an Excel file generated correctly.
All Answers
The most detailed article is this one with a precise link to xlsx.js usable directly:
https://dev.to/karkranikhil/multiple-worksheets-in-excel-using-lightning-web-components-4fpp
There are many problems otherwise like this one (with solution): https://salesforce.stackexchange.com/questions/186448/using-xslx-js-library-on-lightning-component
This other technique is simpler (very close to yours): https://www.apexhours.com/export-to-csv-xls-using-lightning-web-component/
I tried this : https://dev.to/karkranikhil/multiple-worksheets-in-excel-using-lightning-web-components-4fpp and I get an error on this line : var wb = XLSX.utils.book_new(); that utils does not exist.
I also tried : https://learn.habilelabs.io/salesforce-export-to-excel-with-lightning-web-component-875b3f4b7e53 and I get an error on this line : writeXlsxFile(...... not a function
I am able to successfully create a CSV file download with no problem. The request is for a .XLS.
I found a way to work with a VisualForce page, but it gives me an error when opening it that the file extension doesn't match the format, but still opens correctly.
I am just surprised that this is so difficult in Salesforce... I have worked with Excel successfully for years in COBOL, lol.
Promise.all([loadScript(this, workbook + "/xlsx.full.min.js")]) ( if you create a direct zip like me of xlsx.full.min.js without folder )
Two missing classes indeed: getAccountList (without "s" ) getContactList without "s"
Promise.all([loadScript(this, workbook + "/xlsx.full.min.js")])
Download ok of an Excel file generated correctly.