xlsxファイルを元にHTMLとして表示

Question

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.1/xlsx.full.min.js"></script>

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

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

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

Comments

[m.ts10806]

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

[Lhankor_Mhy]

> 既に保存してあるxlsxファイルを、HTMLとして表示というものが見つかりません

読み込みのサンプルがありました。
https://oss.sheetjs.com/sheetjs/ajax.html

また、HTMLへの変換ユーティリティ関数もあるようです。
https://github.com/SheetJS/sheetjs#html-output

ですので、このライブラリで何とかなると思いますが、それなりにスキルは必要かと思います。

[Miii]

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

[Miii]

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

Answer 1

こんにちは。

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

    <div id="table"></div>
    <script src="https://unpkg.com/xlsx@0.16.8/dist/xlsx.full.min.js"></script>
    <script>
        fetch('sample.xlsx')
            .then(async r => document.getElementById('table').insertAdjacentHTML(
                'afterbegin',
                XLSX.utils.sheet_to_html(
                    XLSX.read(
                        await r.arrayBuffer(), { type: 'buffer' }
                    ).Sheets.Sheet1,
                    { header: '', footer: '' }
                )
            ));
    </script>

コメントを受けて追記

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

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

Comments

[Miii]

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

[Miii]

えええええ、こんな短いコードでできるのですね！！
ものすごく驚きました！
ありがとうございます！！！

こちらの記述ですと、セル範囲指定はどうやって記述すればいいのでしょうか？

[Lhankor_Mhy]

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

[Lhankor_Mhy]

もしかして、セル範囲を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]

ありがとうございます！
ドキュメントの理解がうまくできずにいます・・・
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]

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

[Miii]

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

[Lhankor_Mhy]

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

こちらも勉強になりましたので、質問を高評価させていただきました。