iT邦幫忙

1

目前 CSS 是否尚無方法於列印時自動計算 Page 頁數?

各位邦友好,
目前在製作客製化表單,需要於網頁列印大量資料,而當 Table 的 Row 相當多時,難免會遇到列印時自動分頁,也因此衍生一個問題,當因資料筆數多時,在瀏覽器列印的自動分頁,要如何在被自動分頁的頁面上帶入頁碼?

這裡因為印製表單屬於客製化格式,所以頁碼需要在固定位置以及固定格式,無法使用瀏覽器預覽列印中提供的頁碼選項。

經過 Google 上各種關鍵字爬文,多半是使用 CSS 的 counter 來做,但這方式需要自行明確標記出分頁元素,若是 Table 有大量 Row 時的自動分頁,counter 就無法作用,是否各位有遇過相同的問題呢?

示意程式碼:

<table>
    <thead>
        <tr>
            <th>項次</th>
            <th>項目</th>
            <th>單位</th>
            <th>數量</th>
            <th>單價</th>
            <th>複價</th>
            <th>備註</th>
        </tr>
    </thead>
    <tbody>
        <!-- 1,000 行以上的資料 -->
    </tbody>
</table>
因為PRINT 老實說要算分頁是有技巧的,基本上所有的欄位你要先預訂好寬度高度
超過欄位長度的只能隱藏,尤其是表格式報表,你列印出來邊界行數列數一定是固定的,或是你可以改成橫印,可以每列多印更多的字元,但是每頁的列數一定會減少,這些都是要先預估的,還有頁首頁尾的列數要先扣掉,當然如果有頁首頁尾,那每一欄老實說固定寬度之後,不太需要OVERHIDDEN的,因為超過自然就是下一頁,然後你的頁首頁尾都會有說明的,大致上這樣
睿之 iT邦新手 5 級 ‧ 2021-10-19 15:31:05 檢舉
目前確實是類似這種方式處理,只是真的很想用 table 的 thead 跨頁時自動 repeat 的效果,可以少處理很多東西 XD
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
純真的人
iT邦大師 1 級 ‧ 2021-10-19 11:36:21
最佳解答

你只能預先估計每頁幾筆就該分頁~
丟出去列印就是印表機的事了~

參考CSS分頁 page-break-after: always;
https://developer.mozilla.org/zh-CN/docs/Web/CSS/page-break-after
https://ithelp.ithome.com.tw/articles/10226331

因為網頁只能呼叫印表機~無法做印表機參數控制~

睿之 iT邦新手 5 級 ‧ 2021-10-19 11:53:19 檢舉

謝謝回應。
每頁幾筆這點也是會遇到一個問題,那就是上述問題示意程式碼中的「項目」,這個欄位內容字數並不是每一列都固定的,很多時候字數會多到擠成兩、三行,如果要用估計的話,那就是要估到每一列的字數了,然後還有等寬字跟非等寬字的問題

因為網頁無法控制印表機~只能自己預測了~除非你寫單機軟體~可以去控制印表機才有可能~

睿之 iT邦新手 5 級 ‧ 2021-10-19 12:52:29 檢舉

感謝,這樣我就不用執著使用 CSS 處理分頁頁碼問題了 XD

我要發表回答

立即登入回答