sheetJSを使って、XLSXのファイルを読み込んで出力したいのですが、
XLSXの元データについた背景色、文字色をそのまま出力したいのですが、可能でしょうか?
不可の場合は、不本意ではありますが、文字列にて判別し背景色、文字色を変える処理をしようと考えております。
後、気になったことは元データの文字列の一部に色がついていると表示がおかしくなる時があります。
元データからの色の読み取りがわからなかったので、
下記では文字列判別のために表の中身をコンソール出力しています。(文字列自体の判別処理はまだ未実装です)
html
1<!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="unicode"><script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.1/xlsx.full.min.js"></script> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 6 <title>demo</title> 7 </head> 8 9 <body> 10 <style> 11 #excel-table td{ 12 border:1px solid black; 13 width:50px; 14 } 15 #excel-table tr:nth-child(1) td{ 16 position: sticky; 17 z-index: 2 !important; 18 font-weight: bold; 19 background-color: #544a65; 20 color:white; 21 top:0; 22 height:10px; 23 } 24 </style> 25 <div id="excel-table"></div> 26 27 <script> 28 fetch('sample.xlsx') 29 .then(async r => { 30 const workbook = XLSX.read( await (r.arrayBuffer()), { type: 'buffer' } ); 31 const worksheet = workbook.Sheets.Sheet1; 32 worksheet['!ref'] = 'F4:T7'; 33 const table = XLSX.utils.sheet_to_html( worksheet, { header: '', footer: '' } ); 34 document.getElementById('excel-table').insertAdjacentHTML( 'afterbegin', table ); 35 36 37 38 const sheet = workbook.Sheets[workbook.SheetNames[0]]; 39 const range = XLSX.utils.decode_range(sheet['!ref']); 40 for(let row=range.s.r; row<=range.e.r; row++){ 41 for(let col=range.s.c; col<=range.e.c; col++){ 42 const address = XLSX.utils.encode_cell({r:row, c:col}); 43 const cell = sheet[address]; 44 if(cell){ 45 console.log( cell.w ? cell.w : cell.v ); 46 } else { 47 console.log( '' ); 48 } 49 } 50 } 51 52 53 54 }); 55 </script> 56 57 </body> 58</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/01 13:44
2020/11/01 14:32
2020/11/05 13:15