Hello Paramveer,
I am trying to export Grid data with images to Excel. I am using the latest version (V11).
In my scenario, if the actual image file is not present in the server directory or the image cannot be loaded due to an invalid path, I am unable to export the Grid.
I am able to reproduce the same issue in the following demo:
https://paramquery.com/pro/demos/export_xlsxYou just need to change the image path.
Kindly check the code below.
async function exportXlsx() {
var $t = this.toolbar(),
hlAlternateRows = $t.find('.alternateRows').prop('checked');
var blob = await this.exportData({
format: 'xlsx',
eachRow: function(row, ri, rowData, rows) {
if (hlAlternateRows && rows.length % 2 != 0) {
row.bgColor = "#f0f0f0";
}
},
linkStyle: "text-decoration:underline;color:#0d6efd;",
skipHiddenCols: $t.find('.xHCols').prop('checked'),
skipHiddenRows: $t.find('.xHRows').prop('checked'),
selection: $t.find('.selectedRows').prop('checked') ? 'row' : '',
render: $t.find('.render').prop('checked')
});
pq.saveAs(blob, "pqGrid.xlsx");
}
var exportRenderAthlete = true,
colM = [
//checkboxes are displayed and their values saved in same column.
{
type: 'checkbox',
dataIndx: 'selected',
dataType: 'bool',
title: '',
skipExport: true,
menuInHide: true,
menuIcon: false,
maxWidth: 25,
cb: {
select: true,
header: true
}
},
{
title: 'Athlete Details',
colModel: [{
title: "Athlete",
dataIndx: "athlete",
width: 160,
exportRender: exportRenderAthlete,
render: function(ui) {
var name = ui.cellData.split(/\s/).join("_"),
url = "
https://en.wikipedia.org/wiki/" + name;
return {
text: "<a href='" + url + "' target='popup' onclick=\"window.open('" + url + "','popup','width=600,height=600'); return false;\">" + ui.cellData + "</a>",
//this style overrides linkStyle.
style: "color:#ff0000;"
}
}
},
{
dataIndx: 'image',
width: 100,
title: 'Picture'
},
{
title: "Country",
dataIndx: "country",
width: 120
},
{
title: "Age",
dataIndx: "age",
width: 90,
align: 'center',
dataType: 'integer'
},
{
title: "Sport",
dataIndx: "sport",
width: 110
}
]
},
{
title: 'Medal Details',
colModel: [{
title: "Gold",
dataIndx: "gold",
width: 100,
dataType: 'integer'
},
{
title: "Silver",
dataIndx: "silver",
width: 100,
dataType: 'integer'
},
{
title: "Bronze",
dataIndx: "bronze",
width: 100,
dataType: 'integer'
}
]
},
//{ _title: "Year", dataIndx: "year", width: 90, dataType: 'integer' },
{
title: "Date",
dataIndx: "date",
dataType: 'date',
width: 110
},
];
var dataModel = {
location: "remote",
url: "/Content/olympicWinners.json",
getData: function(data) {
data.forEach(rd => {
if (rd.image) {
// Convert to a valid URL
// Change the path from /images to /images1
// rd.image = window.location.origin + "/pro2/content/images/" + rd.image;
rd.image = window.location.origin + "/pro2/content/images1/" + rd.image;
// Set the cell type to 'Pic'
rd.pq_cellprop = {
image: {
inst: 'Pic'
}
}
}
});
return {
data: data
};
}
};
var obj = {
height: 500,
title: 'Olympics winners',
showTitle: false,
columnTemplate: {
get styleHead() {
return this.skipExport ? 'background-color:#ffcccc;' : "";
}
},
toolbar: {
items: [{
//for adding pictures in cells.
type: 'picCell'
},
{
type: 'separator'
},
{
type: 'checkbox',
cls: 'xHCols',
label: 'Skip Hidden Columns'
},
{
type: 'checkbox',
cls: 'xHRows',
label: 'Skip Hidden Rows'
},
{
type: 'checkbox',
value: exportRenderAthlete,
label: 'Include Hyperlinks',
listener: function(evt) {
var col = this.Columns().find(function(col) {
return col.dataIndx == 'athlete';
})
col.exportRender = evt.target.checked;
}
},
{
type: 'checkbox',
cls: 'selectedRows',
label: 'Selected Rows'
},
{
type: 'checkbox',
cls: 'alternateRows',
label: 'Highlight alternate rows'
},
{
type: 'button',
label: "Export",
icon: 'ui-icon-arrowthickstop-1-s',
listener: exportXlsx
}
]
},
skipExport: function() {
//update the header titles upon every change in skipHeader property via header popup.
this.refreshHeader();
},
dataModel: dataModel,
scrollModel: {
autoFit: true
},
colModel: colM,
numberCell: {
width: 40
},
menuIcon: true,
hwrap: false,
wrap: false
};
pq.grid("#grid_export", obj);
In the above code, I changed the file path as follows:
rd.image = window.location.origin + "/pro2/content/images1/" + rd.image";
After that, when I tried to export the file, I encountered the following error:
Failed to load resource: the server responded with a status of 404 () /pro2/content/images1/Michael_Phelps.jpg:1
