既にサーバに保存してあるxlsxファイルを元に、HTMLとして表示させたいです。

調べてみると、sheetjsというものが良い気がするのですが、
ファイルをアップロードして、それを表示というものは見つかったのですが、
既に保存してあるxlsxファイルを、HTMLとして表示というものが見つかりません。

というような形で使えるものがいいので、そうなるとやはりsheetjsになるのかなぁっと感じております。
jsファイルをダウンロードして使えるものもあるかとは思うのですが、
ダウンロードするものはセキュリティの問題で使えません・・・。

それらしきサイトを唯一見つけたのですが、
消してしまい、また履歴も残っておりません・・・
探しているのですが、そのサイトを見つけることができません・・・

お力添えいただけると幸いです。

m.ts10806

2020/10/21 23:33

＞ダウンロードするものはセキュリティの問題で使えません・・・。これだと提示のようなCDNもグレーなのでは（外部のネットワークにいくわけだし）ネットワーク的な制約がある場合、全く状況把握できない他者では手を差し伸べようがないことも多いです。

Lhankor_Mhy

2020/10/22 01:48

> 既に保存してあるxlsxファイルを、HTMLとして表示というものが見つかりません読み込みのサンプルがありました。 https://oss.sheetjs.com/sheetjs/ajax.html また、HTMLへの変換ユーティリティ関数もあるようです。 https://github.com/SheetJS/sheetjs#html-output ですので、このライブラリで何とかなると思いますが、それなりにスキルは必要かと思います。

Miii

2020/10/22 11:42

ありがとうございます！見せていただきます＾＾

Miii

2020/10/22 11:45

m.ts10806様お返事ありがとうございます！おっしゃるとおり、確かにグレーですね。ただ、極力ダウンロードしたものではなく、使用出来るものが望ましいと感じております。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

作ってみました。
ワンライナーで書けるんですね。便利。

HTML
1    <div id="table"></div>
2    <script src="https://unpkg.com/xlsx@0.16.8/dist/xlsx.full.min.js"></script>
3    <script>
4        fetch('sample.xlsx')
5            .then(async r => document.getElementById('table').insertAdjacentHTML(
6                'afterbegin',
7                XLSX.utils.sheet_to_html(
8                    XLSX.read(
9                        await r.arrayBuffer(), { type: 'buffer' }
10                    ).Sheets.Sheet1,
11                    { header: '', footer: '' }
12                )
13            ));
14    </script>

コメントを受けて追記

ワンライナーはかっこいいけど読みにくいので、普通に書き直しました。

js
1        fetch('sample.xlsx')
2            .then(async r => {
3                const workbook = XLSX.read( await r.arrayBuffer(), { type: 'buffer' } );
4                const worksheet = workbook.Sheets.Sheet1;
5                worksheet['!ref'] = 'F4:T7'; // A1形式が使えます。
6                const table = XLSX.utils.sheet_to_html( worksheet, { header: '', footer: '' } );
7                document.getElementById('table').insertAdjacentHTML( 'afterbegin', table );
8            });

投稿2020/10/22 03:50

編集2020/10/23 06:31

Lhankor_Mhy

総合スコア36175

Miii

2020/10/22 16:38

すみません、お返事遅くなりました。ありがとうございます！早速、実行してみます！！

Miii

2020/10/22 16:55

えええええ、こんな短いコードでできるのですね！！ものすごく驚きました！ありがとうございます！！！こちらの記述ですと、セル範囲指定はどうやって記述すればいいのでしょうか？

Lhankor_Mhy

2020/10/23 00:42

セル範囲指定、とは具体的には何をしたいのですか？

Lhankor_Mhy

2020/10/23 01:26

もしかして、セル範囲をA1形式で指定してHTMLに変換したいということなら、ドキュメントに書いてあります。 >sheet['!ref']: A-1 based range representing the sheet range. Functions that work with sheets should use this parameter to determine the range. Cells that are assigned outside of the range are not processed. In particular, when writing a sheet by hand, cells outside of the range are not included https://github.com/SheetJS/sheetjs#sheet-objects 実際に範囲を限定してみたところ、想定通り動作しました。

Miii

2020/10/23 05:47 編集

ありがとうございます！ドキュメントの理解がうまくできずにいます・・・ sheet['!ref']:A-1はどこに記述すればいいのでしょうか？例えば、行0列3～行1列10までの範囲だけを読み込む場合で、 await (r.arrayBuffer()), { type: 'buffer', s:{c:3 ,r:0}, e:{c:10, r:1} } と記述してみたり、 .Sheets.Sheet1の部分に、 .Sheets.Sheet1['!ref']:A-1と記述してみたり、 { header: '', footer: '' ,s:{c:3 ,r:0}, e:{c:10, r:1} }のように記述しても、自分のコードが間違っているため、うまくできませんでした…

Lhankor_Mhy

2020/10/23 06:27

コードを追記してみました。

Miii

2020/10/23 06:34

自分の理解力が及ばないばかりに、何から何まで・・・本当にありがとうございます！わざわざコードつくりなおしてくださりありがとうございます＞＜表示されました！！！それにしても、このような短いコードで実現できるとは、すごく驚きです！ありがとうございます！

Lhankor_Mhy

2020/10/23 06:37

どういたしまして。ご解決されて何よりです。簡単なコードで書けるので、このライブラリはすごく使いやすいですね（ドキュメントは読みにくいけど）。私も機会があれば利用してみます。こちらも勉強になりましたので、質問を高評価させていただきました。

行動規範の内容に同意します