iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
1
自我挑戰組

30天的切版日記系列 第 10

Day 10 : Bootstrap 列印

  • 分享至 

  • xImage
  •  

Bootstrap在工作當中算是很常使用

維基百科上的介紹 : Bootstrap是一組用於網站和網路應用程式開發的開源前端框架,包括HTML、CSS及JavaScript的框架,提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件,旨在使動態網頁和Web應用的開發更加容易。

從3.0版本開始,Bootstrap將行動裝置優先作為設計方針。

再來是客戶的列印需求:

  1. 在頁面按下鍵盤 ctrl + p 列印
  2. 在頁面做個按鈕按下去彈出按下ctrl + p 的列印畫面

知道css有這麼一個東西 , 可以設定列印時的樣式

@media print {
}

*列印會用手機寬度的css

首先按下ctrl + p ,畫面使用了手機寬度的css...
原本想說既然這樣那就把桌機版的css複製貼到@media print 裡面,於是...頁面重新整理之後按下ctrl + p 一點動靜也沒有...

打開google 搜尋print css , 大部分的說明都在 @media print 或是 media = "screen" 這類的,還是不解為何它非得用手機的css。
思來想去,看了一陣子,恩...一定是bootstrap的關係,在google 搜尋了 bootstrap print mobile 終於在stackoverflow有了有效的解法 附上連結

//按自己的情況設定
@media print {
  @page {
    size: 330mm 427mm; 
    margin: 14mm;
  }
  .container {
    width: 1170px;
  }
}

*a標籤的連結網址都會被顯示出來

<a href="https://www.google.com">google</a>

新增一個html 放上面這個a標籤連結試試 , 會有下面兩種結果
沒有bootstrap css的ctrl+p列印

引入bootstrap css的ctrl+p列印

解決方法是在@media print另外為a[href] content 給個 " "

@media print {
  a[href]:after {
    content: "";
  }
}

大概就是這麼一回事


上一篇
Day9 : 做個DatePicker (三) - 事件
下一篇
Day 11 : Git & Github 學習筆記(一)
系列文
30天的切版日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言