テーブルの書式を維持したまま印刷する方法

kintone カスタマイズ
1

テーブルの書式を維持したまま印刷する方法のご教示をお願いします。

下記のJSで書式と設定し無事に反映したのですが、

このまま「レコード印刷」のボタンを操作しすると

JSが上手く作動しません。

 

(function() {
    “use strict”;
   
    kintone.events.on([“app.record.detail.show”,
                       “app.record.create.show”],function(event){

var table_hedder = document.getElementsByClassName(“subtable-label-gaia”);

var field_name = document.getElementsByClassName(“subtable-label-inner-gaia”);

for(var i = 0; i < table_hedder.length; i++){
  if(field_name[i].innerHTML === “品名”){
     table_hedder[i].style.backgroundColor = “black”;
   }else if(field_name[i].innerHTML === “単位”){
     table_hedder[i].style.backgroundColor = “black”;
   }else if(field_name[i].innerHTML === “単価”){
     table_hedder[i].style.backgroundColor = “black”;
   }else if(field_name[i].innerHTML === “金額”){
     table_hedder[i].style.backgroundColor = “black”;
   }else if(field_name[i].innerHTML === “数量”){
     table_hedder[i].style.backgroundColor = “black”;
     }
    }
   })
   })();

 

別の方法として、下記CSSを実行すると、

「レコード印刷」→「印刷」まで書式が保持されたまま印刷ができます。

ただ、こちらの場合だとレコード一覧のヘッダーが同時色が変更してしました。

どうにかレコード一覧のヘッダーも変えず、「レコード印刷」→「印刷」まで書式が保持されたまま印刷ができますでしょうか。

 

ご教示お願いします

 

body {-webkit-print-color-adjust: exact;}

th {background-color: #000 !important;}

 

 

2

JavaScriptで実装する場合、印刷画面表示イベント（app.record.print.show）があるので、そちらをイベントに追加すれば可能です。

cssの場合

.page-app-print th {
  background-color: #000 !important;
}

.page-app-print body {
  -webkit-print-color-adjust: exact;
}

こちらで可能です。

3

mls-hashimoto様

 

ありがとうございます。上手く出来ました。

4

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。