Excel (.XLSX) files are not displaying properly if file has merge cell and empty cell
rajeev-thinksys opened this issue · comments
I have a solution for it and working fine.
Original parse method in /src/components/drivers/xlsx-viewer.jsx:
const dataArr = new Uint8Array(this.props.data);
const arr = [];
for (let i = 0; i !== dataArr.length; i += 1) {
arr.push(String.fromCharCode(dataArr[i]));
}
const workbook = XLSX.read(arr.join(''), { type: 'binary' });
const names = Object.keys(workbook.Sheets);
const sheets = names.map(name => (
XLSX.utils.sheet_to_csv(workbook.Sheets[name])
));
return { sheets, names, curSheetIndex: 0 };
Instead of converting to .csv, you can use the sheet_to_html function of XLSX and then update the render method of xlsx-viewer driver component to render the content in a div.
Updated parse method of xlsx-viewer driver:
const dataArr = new Uint8Array(this.props.data);
const arr = [];
for (let i = 0; i !== dataArr.length; i += 1) {
arr.push(String.fromCharCode(dataArr[i]));
}
const workbook = XLSX.read(arr.join(''), { type: 'binary', cellStyles: true, cellDates: true, cellHTML: true });
const names = Object.keys(workbook.Sheets);
const sheets = names.map(name => (
XLSX.utils.sheet_to_html(workbook.Sheets[name], { blankRows: false, defval: '' })
));
return { sheets, names, curSheetIndex: 0 };
Updated render method of xlsx-viewer driver:
const { sheets, names, curSheetIndex } = this.state;
return (
{this.renderSheetNames(names)}
<div style={{ background: 'white' }} dangerouslySetInnerHTML={{ __html: sheets[curSheetIndex || 0] }} />
);
I think many people are experiencing the same issue. can add this fix for us.
I did what you asked, but it didn't seem to work