HyperLink Issue during export

Answered
Sen asked on September 19, 2024

Hi, I have dynamic data and one of field added a hyperlink.

When trying to export to excel/csv, hyperlink is not shown.

similar example of pivot table: https://jsfiddle.net/flexmonster/ubx8h2et/

Possible way to show hyperlink option on export.

5 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster September 20, 2024

Hello,

Thank you for reaching out to us.

Kindly note that customizeCell isn't intended to work with the export. Since every cell's style can be unique when using customizeCell - such a function would take a lot of time. Therefore, an export report with customized cells is impractical because it would last much longer. To display data correctly when exporting, we recommend setting the useCustomizeCellForData to false in the exportTo API call:

function exportToExcel() {
 pivot.exportTo('excel', {useCustomizeCellForData: false});
}

You are welcome to contact us if other questions arise.

Kind regards,
Nadia

Public
Sen September 23, 2024

Hi Nadia, Thanks for the reply, But in my scenario, I receive the url in json format. I try to convert to link before export. I used the solution of yours but seems to be not working.

I have added my sample scenario

flexmonster.customizeCell((cell, data) => {
// my data is like {label: "{url: \"{sample-ui}/page/10\", value: "details"}", value: nan, type: header...}
if(data.type === 'header && data.member) {
const urlRegex = /url:"([^"]+)"/;
const valueRegex = /url:"([^"]+)"/;
const urlMatch = data.label(urlRegex);
const valueMatch = data.label(valueRegex);
const extractUrl = urlMatch[1].replace('{sample-ui}', env.LOCAL);
const finalUrl = extractUrl.starsWith('http') ? extractUrl.replace(/^http:\/\//,'https://') :
`https://${extractUtl}`;
cell.text =`<a href=${finalUrl} target='_blank'>${valueMatch[1]}</a>`
}
});

Export Handler
customExportHandler() {
const currReport = this.flexmonster.getReport();
const afterGridDraw= () => {
this.flexmonster.off('aftergriddraw', onAfterGridDraw);
const exportOptions={useCustomizeCellForData: false};
this.flexmonster.exportTo('csv', exportOptions, () => {
this.flexmonster.setReport(currReport);
}
}

Basically, I need to change the url json format to link only during export not in UI. is it possible? I have attached the screenshot for ref

Attachments:
csv.PNG
UI.PNG

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster September 24, 2024

Hi Sen,

Thank you for the response.

We want to explain that Flexmonster does not allow changing the data during export. The customizeCell function is only applicable to the UI, not to export. As a workaround, you can use export customization and follow these steps to customize the exported file:

  1. Use the destinationType: "plain" parameter of the exportTo() API call to retrieve the grid content as a Uint8Array returned in the callbackHandler.
  2. Use a third-party library (e.g., SheetJS) to process the resulting Uint8Array and apply the necessary changes, such as changing the link. Please note that this process is expected to be done on your side.

We hope it helps. You are welcome to contact us in case other questions arise.

Kind regards,
Nadia

Public
Sen September 24, 2024

Hi Nadia, Thanks can you provide sample example for solution 1

// Change particular field text and export
function customExportHandler = () => {
const onAfterGridDraw = () => {
this.flexmonster.off('aftergriddraw', onAfterGridDraw);
this.flexmonster.exportTo('csv', {destination: 'plain'}, result => {
console.log(result)// shows type, data,filename.

// Replace the value if it matches
result = {
...result,
data: result.data.replace(/(.*)\,/g, (match) => {
const value = match.trim();
return dataApi.find(item => item.value === value)?.details || match
})
}
// result.data shows replaced text.
const blob = new Blob([result.data], {type: 'text/csv;charset=utf=8'});
const url = URL.createObjectUrl(blob);
const a = document.createElement('a');
a.href=url;
a.download=result.filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);



});
};
this.flexmonster.on('aftergriddraw', onAfterGridDraw);
this.flexmonster.expandAllData();
}
// Custom Button for exportind csv
<button id="export-csv" @click=${this.customExportHandler}</button>

I have tried this approach, it replaces the text, but export download happens to be twice,
one with original text and other with replace text.
can help on this?

Is this approach correct way, can help?
Public
Nadia Khodakivska Nadia Khodakivska Flexmonster September 26, 2024

Hello,

Thank you for the reply.

We recommend removing the aftegriddraw event from the provided code because the aftergriddraw event will be triggered as many times as the grid is redrawn. Grid rendering can occur several times depending on the amount of data to be shown.

Please let us know if it works for you.

Kind regards,
Nadia

Please login or Register to Submit Answer