CSS 如何動態計算頁碼? - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

CSS 如何動態計算頁碼?

css html 網頁製作網頁排版網頁製作網頁 html css3

ckleung2828 2023-01-09 16:10:03 ‧ 946 瀏覽

分享至

大家好,我剛剛開始嘗試使用HTML和CSS,打用作電腦程式自動生成HTML來製作PDF檔案用作PDF報告

我先將body設為A4紙張的尺寸,再設定在列印預覽時候,body內容超過A4紙後會自動換一頁,另外,我設置了一個footer將它綁定在的底部,列印時候就看到每一頁的底部都有一個頁碼,而footer:after 裡面我設定了counter-increment,和content已顯示頁碼,但是就不能夠每換新的一頁就偵測到已經換了頁,每一頁的頁碼都顯示"Page 1 of 0",我嘗試過將"counter-increment"放在@media print的body裡面,但還是沒有甚麼改變,我希望每更換新一頁,頁碼都會正確地改變,不知道應該怎樣做才對呢?

以下是我的相關代碼,其他我有寫但沒有提及到的則是我上網參考其他國外大神的分享的網頁排版技巧:

以下是我在瀏覽器按"Ctrl + P"出來的結果,每一頁的底部都是"Page 1 of 3",應該第一個是"Page 1 of 3",第二個是"Page 2 of 3",以此類推...,結果圖片跟我寫的代碼不同是因為我減省了很多不必要的代碼以供這裡各位大神的閱覽和參考

新手第一次發問,有甚麼錯處還請包涵,還有請多提點,感謝各位大神

窮嘶發發發 iT邦高手 1 級 ‧ 2023-01-09 16:26:33 檢舉

Did you try this:

@page {
@bottom-left{
content: counter(page) " of " counter(pages);
}
}

@page 是列印才會處理的，你用一般的沒辦法在列印時處理

ckleung2828 iT邦新手 5 級 ‧ 2023-01-10 17:04:57 檢舉

用程式製作了PDF以後看不到頁碼

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

1 個回答

3

小山丘

iT邦新手 2 級 ‧ 2023-01-09 16:26:28

回應 2
分享
檢舉

窮嘶發發發 iT邦高手 1 級 ‧ 2023-01-09 16:39:00 檢舉

這篇好完整，筆記 ...

ckleung2828 iT邦新手 5 級 ‧ 2023-01-10 16:58:45 檢舉

這一篇使用了div tag做分頁,感覺跟我上面所要求的不太一樣因為我不知道每一個div tag裡面是不是超過一頁A4紙的內容量

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙