Excel (.XLSX) files are not displaying properly if file has merge cell and empty cell

[rajeev-thinksys]

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.

[jack-hub-maker]

I did what you asked, but it didn't seem to work