質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

8368閲覧

SheetJSによる元データの背景色、文字色の出力方法について

MiiiRiyu

総合スコア30

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/10/30 06:41

編集2022/01/12 10:55

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>

[Excel参考画像]
Excel画像

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

SheetJSの通常版では背景色や文字色を含めた、書式設定等を取得することは出来なかったと思います。Pro版ならできるかもですが…

代わりにxlsx-populateを調べてみてはいかがですか?
こちらのライブラリはstyleで書式設定を設定することができるので、取得も可能ではないでしょうか?実際に書式取得は試していないですがご参考ください。
xlsx-populate

投稿2020/10/30 15:03

Daichan410

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MiiiRiyu

2020/11/01 13:44

お返事ありがとうございます! SheetJSの通常版は背景色や文字色の取得ができない可能性があるのですね… ドキュメントをみていたのですが、探したりないのかもしれませんが、それらしい記述を見つけることができなかったので、もしかしたらとは思っていたのですが… xlsx-populateというものがあるのですね! 情報を調べてみたところ、こちらは書式含め、エクセルデータへの書き込みをするというサイトが多いように感じるのですが、エクセルからのHTML出力もあったりするのでしょうか。
Daichan410

2020/11/01 14:32

エクセルからのHTML出力については、XLSX.utils.sheet_to_htmlのような関数は用意されていないようですので、自身で実装する必要があります。 Tableのタグ(Table,tr,to)と必要なセルの情報を文字列連結して、編集すれば実現できると思います。
MiiiRiyu

2020/11/05 13:15

XLSX.utils.sheet_to_htmlのような関数はないのですね。(プロ版除く) つまり、HTML側(jqueryも含む)での装飾しかないということになるのですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問