kintone で SpreadJS を印刷

#kintone で SpreadJS を印刷
SpreadJS は機能豊富ですが、印刷関連機能については、いまのところ見当たりません。
とりあえず、印刷できないか試してみました。

##kintone の標準印刷機能で SpreadJS を印刷
標準印刷機能では、何も表示されません。
SpreadJS は、canvas 上に描画されているためだと思われます。

#canvas をimage 変換して、印刷
簡易的な対策として、canvas をimage 変換して、印刷してみます。

詳細画面
![image](https://qiita-image-store.s3.amazonaws.com/0/100572/9a554db7-d177-4ac3-c87a-925c675dce86.png)

スプレッドシートは、canvas 上に描画されている部分しか印刷されません。
まあ、そうですよね。

印刷イメージ
![image](https://qiita-image-store.s3.amazonaws.com/0/100572/a2f28e1f-21a5-88b9-738d-666e12abc60b.png)

#スプレッドシートの表示サイズ変更後に印刷

表示サイズ変更後すぐに印刷処理を行うと、描画が間に合わないため、サイズ変更前の印刷でした。
描画を待つのも面倒なので、サイズ変更ボタンで追加して、印刷するしくみにしました。

サイズ拡張後の詳細画面
![image](https://qiita-image-store.s3.amazonaws.com/0/100572/e92b1324-7b86-7bc3-fa94-60117da29964.png)

サイズ拡張後の印刷イメージ
![image](https://qiita-image-store.s3.amazonaws.com/0/100572/85f145d0-fc95-32e9-fbfa-ccf8c2cecdec.png)

残念ながら、PDF の表示は、それほどよくありません。あくまで簡易的な印刷ですね。
![image](https://qiita-image-store.s3.amazonaws.com/0/100572/97f6fbdd-b8e6-e840-6e32-082718a1dfb3.png)


#JavaScript

IFRAME を作成して、スプレッドシートのCANVAS から IMAGE 変換して印刷しています。
サイズ変更は、height 変更後に再描画しても、うまくいかなかったため、再作成しています。

```
        if(event.type == "app.record.detail.show"){

            // 印刷ボタン
      		var btn1 = document.createElement('button');
      		btn1.setAttribute("id", "xp-btn-print1")
    		btn1.style.width="100px";
    		btn1.style.height="35px";		
    		btn1.style.align="center";
    		btn1.style.margin="0 0 0 10px";
        	btn1.appendChild(document.createTextNode('シート印刷'));
    		btn1.onclick =  function(){
    
                // 印刷用フレーム作成
    			var iframe = document.createElement('IFRAME');
    			var doc = null;
    			document.body.appendChild(iframe);
    			doc = iframe.contentWindow.document;
    
    			var strHtml = '<body>';
    			strHtml += '<h1 id="xp-title" style="margin: 5px;"></h1>';
    			strHtml += '<img id="xp-img1">';
    			strHtml += '</body>';
    
    		    doc.write(strHtml);
    			doc.close();
    			
    
                // スプレッドシートをpngに変換して、フレームにセット
                var cvs1Id = sspace1.id + 'vp_vp';
    			var cvs1 = window.document.getElementById(cvs1Id);
    			if(cvs1){
    				var img1 = doc.getElementById('xp-img1');
    				img1.src = cvs1.toDataURL();
    			}

                // タイトルセット
				var head1 = doc.getElementById('xp-title');
				head1.textContent = event.record['タイトル']['value'];

                // 印刷処理   
    			iframe.contentWindow.focus();
    			iframe.contentWindow.print();
    			document.body.removeChild(iframe);
    		}
    		kintone.app.record.getHeaderMenuSpaceElement().appendChild(btn1);

            // シート表示サイズ変更
      		var btn2 = document.createElement('button');
      		btn2.setAttribute("id", "xp-btn-print2")
    		btn2.style.width="100px";
    		btn2.style.height="35px";		
    		btn2.style.align="center";
    		btn2.style.margin="0 0 0 10px";
        	btn2.appendChild(document.createTextNode('サイズ'));
    		btn2.onclick =  function(){
    		    $(sspace1).empty();
                if($(sspace1).css("height") == "300px")
        			$(sspace1).css("height","900px");
                else
        			$(sspace1).css("height","300px");
                $(sspace1).wijspread();
                spread = $(sspace1).wijspread("spread");
                if(event.record['データ']['value']){
                    // インポート
                    spread.fromJSON(JSON.parse(event.record['データ']['value']));
                }
    		}
    		kintone.app.record.getHeaderMenuSpaceElement().appendChild(btn2);
```