Print.js - Landscape Printing

by ph822720355

HTML

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

<div id="print-element">
  <h1 style="color: green;">
    Print.js Landscape Page Orientation Or 簽到表
  </h1>
  


  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero enim, consequat et interdum sed, placerat sit amet ligula. Sed maximus dolor et eleifend efficitur. Morbi viverra pretium ultrices. In luctus ante eu dictum dignissim.
  </p>

  
  
</div>

<button id="print-button">
    Print
</button>

<button onclick="printSchedule()">列印簽到表</button>

CSS

@import url('ttps://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope');

JavaScript

let font = ""

function printTest() {
	printJS({
  	printable: 'print-element',
    type: 'html',
    style: '@page { size: Letter landscape; }'
  })
}

document.getElementById('print-button').addEventListener('click', printTest)






// 模擬簽到資料，可依需求調整或動態產生
    // 這裡示範兩位學生 (name1, name2) 同時簽到的狀態
    const scheduleData = [
      { startTime: '14:00', endTime: '14:15', name1: 'AAA', name2: '王曉明' },
      { startTime: '14:20', endTime: '14:35', name1: 'BBB', name2: 'Alan' },
      { startTime: '14:40', endTime: '15:05', name1: 'CCC', name2: '---' },
      { startTime: '15:10', endTime: '15:35', name1: 'DDD', name2: '---' },
      { startTime: '15:40', endTime: '16:05', name1: 'EEE', name2: '---' },
      { startTime: '16:10', endTime: '16:35', name1: 'FFF', name2: '---' },
      { startTime: '16:10', endTime: '16:35', name1: 'FFF', name2: '---' },
      { startTime: '16:10', endTime: '16:35', name1: 'FFF', name2: '---' },
      { startTime: '16:10', endTime: '16:35', name1: 'FFF', name2: '---' },
    ];

    function printSchedule() {
      printJS({
        printable: scheduleData,
        type: 'json',
        // 指定要印出的欄位與對應的表頭名稱
        properties: [
          { field: 'startTime', displayName: '開始時間' },
          { field: 'endTime', displayName: '結束時間' },
          { field: 'name1', displayName: '工號' },
          { field: 'name2', displayName: '姓名' }
        ],
        // 在表格上方插入自訂標題區 (HTML)
        // 在表格上方插入自訂標題區，左右兩側顯示不同內容
        header: `
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-bottom: 30px; font-size: 30px;">
            <div style="margin: 0;">按摩日期：2025/02/19</div>
            <div style="margin: 0;">按摩人員：東祥老師</div>
          </div>
        `,
        // 自訂樣式
        style: `
          @page {
            size: A4 landscape;   /* A4 橫式 */
            margin: 20mm;         /* 邊界可自行調整 */
          }
          /*...