Page header Print Preview on Chrome browser

1

554
5541317×872 66.8 KB

My app contains a lot of data, so when I print it using the Chrome browser, it gets split across two pages. One of my colleagues suggested that I add a header to appear on the following pages, in case future data sets are also long. I’ve tried to do this, but I haven’t been able to figure it out yet.

(function () {
  'use strict';

  window.addEventListener('load', function () {
    const originalHeader = document.querySelector('.row-gaia.clearFix-cybozu');
    if (!originalHeader) return;

    const clonedHeader = originalHeader.cloneNode(true);
    clonedHeader.classList.add('print-duplicate-header');
    clonedHeader.style.display = 'none'; // ซ่อนไว้ก่อน
    document.body.appendChild(clonedHeader);

    const style = document.createElement('style');
    style.textContent = `
      @media print {
        .print-duplicate-header {
          display: block !important;
          position: absolute;
          top: 1050px;
          left: 0;
          right: 0;
          background: white;
          padding: 10px 20px;
          border-bottom: 1px solid #000;
        }

        body {
          margin-top: 0 !important;
        }

     
        .print-duplicate-header:first-of-type {
          display: none !important;
        }
      }`;
    document.head.appendChild(style);


    setTimeout(() => {
      const docHeight = document.body.scrollHeight;
      if (docHeight > 1122) {
        clonedHeader.style.display = 'block';
      }
    }, 300);
  });
})();
1 Like
2

Hello @Master_Over_Sun

I'm not fully sure what your exact goal is, but just to clarify, you can customize Kintone’s built-in print layout to some extent using the app.record.print.show event.
However, if you're aiming for more advanced control, such as restructuring the entire layout or adding a header that repeats on every printed page, this isn’t possible with the built-in print view.

In that case, you'd need to create a custom print page using JavaScript to open a new window or tab and generate the layout manually. Here’s a related resource that includes examples of creating a custom print page: Bulk Print Records (list view) each record it’s own PDF