ブラウザ(Chrome)の印刷機能について

kintone カスタマイズ
1

はじめまして。chocoと申します。
JS初心者でブラウザ(Chrome)の印刷機能を使用して印刷する際の課題にはまっております。
対応方法をご存じの方がいらっしゃいましたらご教示頂けましたら幸いです。
宜しくお願い致します。

背景:
・jQueryプラグインjPrintArea.js(Webサイトでコード入手)を使用して印刷機能実装
⇒10月頃印刷不可になりました(※1)
※1：メッセージ「印刷プレビューの表示に失敗しました。」が表示される(Q1)
⇒下記コードに変更して印刷対応
・印刷前に画面を33%に縮小表示する必要あり(Q2)
・印刷範囲は1頁ですが2頁表示される為印刷時に頁指定の必要あり(Q3)

kintone.events.on(‘app.record.detail.show’, function(event) {
var printButton = document.createElement(‘button’);
printButton.id = ‘print_button’;
printButton.innerHTML = ‘印刷’;
kintone.app.record.getHeaderMenuSpaceElement().appendChild(printButton);
jQuery(function(){
jQuery(‘button’).on(“click”,function(){
// 不要要素非表示～
window.print();
location.reload();
});
});
});

質問：
Q1:突然印刷できなくなったのは…そんなものでしょうか？
Q2:JSで画面を33%に縮小できますか？
$(“body”).css(“zoom”,“33%”);
と記載するとおかしなことになります…
Q3:JSで印字ページを設定できますか？
Q4:kintoneの詳細画面/一覧画面を印刷する際、皆様一般的にどのような方法で印刷されていますでしょうか。
プリントクリエーター等有料のプラグインを使用する予定はなく、できれば無料のもの(Chromeのプラグイン等)でお勧めがありましたら教えていただければ助かります。

長々と申し訳ございませんが宜しくお願いします。

2

choco さん

cstapの瀧ヶ平です。

 

おそらくjPrintArea.jsが動作しなくなった原因としては、ブラウザではJavaScriptの実行を待ってからiframeのレンダリングを行うため、iframeのレンダリングが終わる前にプリントのプレビューを実行しようとするためプレビュー表示が失敗しているようです。

そのため、jPrintArea.jsのコードを以下の様に修正すれば問題なく動作すると思います。

 

$.jPrintArea=function(el){
var iframe=document.createElement('IFRAME');
var doc=null;
$(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc=iframe.contentWindow.document;
var links=window.document.getElementsByTagName('link');
for(var i=0;i<links.length;i++)
if(links[i].rel.toLowerCase()=='stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>');
doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>');
doc.close();
iframe.contentWindow.focus();
setTimeout(iframe.contentWindow.print.bind(iframe.contentWindow), 0);
}

 

3

瀧ヶ平様

お世話になります。
chocoです。
ご回答頂きありがとうございました。

jPrintArea.jsのコードをご説明頂いたコードに修正したところ
問題なくプレビュー表示できるようになりました。

大変助かりました。
ありがとうございました。
また何かありました際は宜しくお願い致します。

※修正箇所

：
iframe.contentWindow.focus();
// 修正前 ----------
// iframe.contentWindow.print();
// alert(‘Printing…’);
// document.body.removeChild(iframe);
// 修正後 ----------
setTimeout(iframe.contentWindow.print.bind(iframe.contentWindow), 0);
：