I have jqGrid with grouped columns and I want to export jqGrid in excel (.xlsx) format on click of a button.
I am able to export the table in excel with .xls format but this is the old format and I want to export in .xlsx format.
below is the code.
$('#excel').unbind().click(function (){
var a = document.createElement('a');
var data_type = 'data:application/vnd.ms-excel'; ?
var table = $("#hiddenGrid");
var table_html = '<table><thead><style> table, td {border:thin solid lightgrey}</style><tr><th></th><th>Group</th><th>Sort</th><th>Item ID</th><th>Description</th><th>Tag</th><th>Quantity</th><th>Cost Total</th><th>Sell Total</th><th>Qty Shipped</th></tr></thead></table>';
table_html = table_html + table[0].outerHTML;
a.href = data_type + ', ' + escape(table_html).replace("%u", '-');
a.download = 'GridExport.xls';
a.click();
});
I have tried changing GridExport.xls to GridExport.xlsx but no luck.
is there any third-party tool that I have to use to export the excel in .xlsx format? or any other solution?
Related
In my Flask application, I created a button to extract the content of an HTML table into an Excel file. I used Javascript to extract from my interface the content of my HTML table in Excel format.
Unfortunately, when I run the code below, the downloaded Excel file is empty. Could you please help to correct my code below. Thanks.
function exportTableToExcel(filename = ''){
let downloadLink;
let dataType = 'application/vnd.ms-excel';
let tableSelect = document.getElementsByTagName("table");
let tableHTML = tableSelect[0].outerHTML.replace(/ /g, '%20');
// Specify file name
filename = 'All_Issues.xls';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}
The getElementsByTagName() function returns an array so you have to get the first element.
let tableHTML = tableSelect[0].outerHTML.replace(/ /g, '%20');
I have the following Primefaces datatable(part of it is shown below)which gets its values from a database.
<p:dataTable id="datalist" value="#{debtPaymentsController.lazyDebtPayments}" var="item"
selectionMode="single" selection="#{debtPaymentsController.selected}"
lazy="true" widgetVar="debtPaymentsTable"
paginator="true" scrollable="true" scrollWidth="100%"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowKey="#{index}" rowIndexVar="index"
rows="10"
rowsPerPageTemplate="10,20,30,40,50">
</p:datatable>
I am trying to use a Javascript script to export the content of the datatable to excel, because the Primefaces tool to export to excel called DataExporter does not work well with urls:
<script type="text/javascript">
function exportTableToExcel(tableID) {
console.log(tableID);
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
console.log(tableID);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename ? filename + '.xls' : 'excel_data.xls';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if (navigator.msSaveOrOpenBlob) {
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob(blob, filename);
} else {
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}
</script>
Here is the button I am using:
<p:commandButton id ="exportExcelFile" value="exportExcelFile" onclick="exportTableToExcel('datalist')"/>
When I use DataExporter I am running the following and it seems to work fine(other than the url problem not being shown as hyperlink on excel), so I export all the data that is being shown at this specific time on the datatable:
<p:dataExporter type="xls" target="datalist" fileName="payments"/>
Unfortunately,when I use the Javascript way to export the data, no matter what I have tried, datalist data is null when it is given as input to the Javascript function. This is the error I get: Uncaught TypeError: tableSelect is null. How can I pass the values that are being shown in the datatable so I can export them to an excel file?
Instead of trying a close to impossible hack, use <p:dataExporter postProcessor="..."/> to post process the contents of the export.
See:
https://www.primefaces.org/showcase/ui/data/dataexporter/customizedDocuments.xhtml
https://primefaces.github.io/primefaces/11_0_0/#/components/dataexporter?id=pre-and-post-processors
https://poi.apache.org/
I want to know how to export data in html table to existed excel file. I have found ways to export data to new excel file but what I want is to export this data to an existed excel file.
The code I found to export to new file but again I want to append this data to excel file that I already have.
code:
<script type="text/javascript">
function exportTableToExcel(tableID, filename = 'scenario'){
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xls':'excel_data.xls';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}
i have data which i need to export to .csv, for Excel.
I have a function which is working fine but the result file contains all data in first row, in Excel.
Then i need to go to the "Data" tab, then "Text to columns" and pick comma as a delimer.
This is not acceptable.
How can i generate .csv file to avoid this formatting issue ?
I tried \t as a delimer but its not working :/
function download_csv_file(data) {
//define the heading for each row of the data
var csv = 'Header A, Header B, Header C\n';
//merge the data with CSV
data.forEach(function(parentRow) {
parentRow.childNodes.forEach(function(row) {
csv += row.text.concat(',');
});
csv += "\n";
});
//display the created CSV data on the web browser
document.write(csv);
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURIComponent(csv);
hiddenElement.target = '_blank';
//provide the name for the CSV file to be downloaded
hiddenElement.download = 'File_name.csv';
hiddenElement.click();
}
thank in advance for all suggestions
I have an expandable table in html:
How can I convert it into excel file with grouping, something like this:
Im not to sure about the grouping in XLS but the main way we convert data into XL is to use CSV
You can parse the data from your HTML into an array then export that array to CSV
Here is the code to make your html table downloadable to CSV
var data = [
['Foo', 'programmer'],
['Bar', 'bus driver'],
['Moo', 'Reindeer Hunter']
];
function download_csv() {
var csv = 'Name,Title\n';
data.forEach(function(row) {
csv += row.join(',');
csv += "\n";
});
console.log(csv);
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'people.csv';
hiddenElement.click();
}
<button onclick="download_csv()">Download CSV</button>