Javascriptを使用して、Excelのセルにファイルアップロードを挿入する方法

今回は、Handsontableを使って、ファイルアップロードボタンを挿入する方法と、セル内に画像を表示する方法を紹介したいと思います。

Handsontableは、デフォルトで11個のエイリアスを提供することができます。

• time
• text
• select
• password
• numeric
• handsontable
• dropdown
• date
• checkbox
• base
• autocomplete

しかし、file editorでは、これまで提供できませんでした。ファイルアップロードボタンをセルに挿入することは、自分自身で発見しました。4つの方法があるのですが、今日はそのうちの1つ、cells内で呼び出されるrenderer関数を使った方法を紹介します。

今回は、rendererの呼び出し方と、ファイルアップロードボタンと画像の表示方法を中心に説明します。

まず、htmlファイルを作成し、必要なスクリプトファイルを挿入します。

<div id="example1" class="hot "></div>

<script src="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.css" /> 

次に、Handontableを作成し、cells内にrendererを呼び出すための条件をいくつか作成します。commentsとcoversにcustom renderer関数を呼び出すことにします。

const hot = new Handsontable(container, {
                data,
                colWidths: [100, 100, 200],
                colHeaders: ['Title', 'File', 'Cover'],
                colWidths: 300,
                renderer: 'html',
                height: 200,
                columns: [
                    { data: 'title' },
                    { data: 'comments', renderer: safeHtmlRenderer },
                    { data: 'cover', renderer: coverRenderer } 
                ],
                cells: function (row, col, prop) {
                    var cellProperties = {};
                    if(col === 1){
                        cellProperties.renderer = safeHtmlRenderer
                    } 
                    if(col === 2){
                        cellProperties.renderer = coverRenderer
                    } 
                },
                licenseKey: 'non-commercial-and-evaluation'
            });

renderer関数の内部では、カスタムhtmlのデザインを作成し、innerHTMLプロパティでtdに挿入することができます。

function safeHtmlRenderer(instance, td, row, col, prop, value, cellProperties) {

                Handsontable.renderers.TextRenderer.apply(this, arguments);
                    td.innerHTML = '<div><input type="file" id="filechange" name="file[]" class="filebutton"></div>';

                return td;
 }

また、rendererで画像を表示することもできます。

function coverRenderer(instance, td, row, col, prop, value, cellProperties) {

                Handsontable.renderers.TextRenderer.apply(this, arguments);
                    td.innerHTML = '<img src="imges/winter.jpg" width="300" height="150" >';

                return td;
            }

ここまでお読みいただき、ありがとうございました。

By Ami