kintone で SpreadJS を印刷
SpreadJS は機能豊富ですが、印刷関連機能については、いまのところ見当たりません。
とりあえず、印刷できないか試してみました。
kintone の標準印刷機能で SpreadJS を印刷
標準印刷機能では、何も表示されません。
SpreadJS は、canvas 上に描画されているためだと思われます。
canvas をimage 変換して、印刷
簡易的な対策として、canvas をimage 変換して、印刷してみます。
詳細画面
スプレッドシートは、canvas 上に描画されている部分しか印刷されません。
まあ、そうですよね。
印刷イメージ
スプレッドシートの表示サイズ変更後に印刷
表示サイズ変更後すぐに印刷処理を行うと、描画が間に合わないため、サイズ変更前の印刷でした。
描画を待つのも面倒なので、サイズ変更ボタンで追加して、印刷するしくみにしました。
サイズ拡張後の詳細画面
サイズ拡張後の印刷イメージ
残念ながら、PDF の表示は、それほどよくありません。あくまで簡易的な印刷ですね。
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);