お世話になっております。
一覧に表示されているレコードをブラウザの印刷機能を使って印刷すると、
印刷ページ数が複数にまたがる場合、改ページの先頭にくるレコードがkintoneのヘッダー部分に隠れ、印刷されない事象が発生しております。
本事象について、回避策をご存知の方ご教授いただけませんでしょうか。
宜しくお願い致します。
Sakaguchi Shinyaさん
こんにちは。
こちら、私が知ってる範囲で説明させていただきます。
まず、レコードがヘッダーに隠れない状態で印刷するには
「kintoneのヘッダーのHTML要素を一時的に削除する」という方法が有効かと思います。
その手順は下記になります。試してみてください。
(※私が試したブラウザは「Chrome(最新版)」「IE11」「firefox(最新版」です。)
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
【手順】
①一覧画面が表示されている状態で、F12(開発者ツール)を押します。
②開発者ツールが開かれたら、下記のマークをクリックします。
・Chormeの場合：
・IEの場合：
・firefoxの場合：
③クリックしたら、消したいと思うヘッダーの部分をクリックします。
（画像の青い＆緑部分のように全体の部分をクリックするイメージです。）
例)
④選択すると、開発者ツールにそのパーツに当てはまるHTML要素が表示されると思います。
その要素の上にカーソル当てて、右クリックしていただきます。
⑤その後、下記の画像のようにメニューが出てくると思います。
そこで、ヘッダー要素を一時的に削除するというボタンを押します。
・「Chrome」の場合：「Delete element」
・IEの場合：「要素の削除」
・firefoxの場合：「ノード」を削除
⑥上記の手順通りに、ヘッダーの要素を全部削除した上て、
印刷プレビューで確認してみると、kintoneのヘッダー部分に隠れず、きれいに印刷できるかと思いますので、
よろしくお願いします。
Sakaguchi Shinya さん
下記の css で印刷時にヘッダ部を非表示にできます。
ただし、アプリの全画面のブラウザ印刷機能で、ヘッダ部が非表示になります。
一覧画面だけ適用する場合は、一覧画面表示イベントで動的に css を書き込みます。
@media print {
.gaia-header.gaia-header-fixed {
display: none;
}
}
李智恩様
rex0220様
お世話になっております。
早速、ご教授いただきましてありがとうございます。
たいへん助かり、勉強になりました。
いずれの方法でもイメージどおりの出力結果が出ることを確認しました。
一時的ではなく、アプリ内での印刷時全てに適用したいと思っておりますので、
今回は、css で印刷時にヘッダ部を非表示する方が容易に実現できそうです。
今後とも、宜しくお願い致します。
rex0220様
お世話になっております。
ご教授いただいたcssをkintoneアプリに登録して動作確認を行っております。
IE11での印刷余白設定によっては、一覧の左端：｢レコードの詳細を表示する」ボタンと項目値(文字)がページをまたぐことがあります。
Chrome(最新版)でも確認してみましたが、IE11でのみ発生しております。
一覧の表示件数を100件、上下左右の余白を全て15mmにした場合、
1ページ目 ｢レコードの詳細を表示する」ボタン： 10レコード分、項目値(文字)：11レコード分
2ページ目 ｢レコードの詳細を表示する」ボタン： 17レコード分、項目値(文字)：16レコード分
3ページ目以降 ｢レコードの詳細を表示する」ボタン： 17レコード分、項目値(文字)：17レコード分
といった感じになります。
度重なる質問で恐縮ですが、ご存じでしたらご教授いただけませんでしょうか。
宜しくお願い致します。
一覧の項目表示幅は、PC・ブラウザ毎にマニュアル設定可能ですので、余白で調整しても無理です。
簡易的な対策としては、印刷時に、項目の表示幅を印字幅に収まるように調整するくらいです。
nth-child(2) は、項目の位置を指定します。
指定例です。
@media print {
.gaia-header.gaia-header-fixed, .gaia-header-spacer {display: none;}
.recordlist-gaia th:nth-child(2) {width: 240px !IMPORTANT;}
.recordlist-gaia th:nth-child(3) {width: 120px !IMPORTANT;}
.recordlist-gaia th:nth-child(4) {width: 120px !IMPORTANT;}
.recordlist-gaia th:nth-child(5) {width: 90px !IMPORTANT;}
}
rex0220様
お世話になっております。
度重なるコメントに、ご教授いただきましてありがとうございます。
行に関する調整は難しい旨承知しました。
そもそもの問題は、ヘッダー部分に文字が隠れることでしたので、
解消されてたいへん満足しております。
ありがとうございました。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。