在項目中，有一個打印的功能悔叽，原生的window.print()能夠打印出來构韵，但是樣式什么的簡直不忍直視~周蹭，但是要自己寫我也是寫不出來的，所以百度了一下疲恢，知道一個插件jQuery.print.min.js,這個插件能夠改變自己需要打印的樣式的問題凶朗，如果你打印的樣式要求和頁面一樣的話，可以直接引入這個Js就行了显拳，小問題就是頁面分頁會自動鋪滿棚愤，頁頭頁腳都沒有空白位置，如果自己要打印的樣式與頁面顯示的不一樣杂数，例如打印文件那么就要自己再寫個css了宛畦，以下是代碼和頁面顯示效果
頁面寫好后矛绘，引入jq和jQuery.print.min.js，之后再寫一個修改打印的樣式的CSS刃永，
print.css部分
@media print {
? ? .inputList {
? ? ? ? margin-top: 30px;
? ? }
? ? .paging {
? ? ? ? page-break-after:always;
? ? ? ? /*設(shè)置在表格元素之后始終進行分頁的分頁行為：*/
? ? }
? ? .indent2 {
? ? ? ? text-indent: 2em;
? ? }
? ? .indent4 {
? ? ? ? text-indent: 4rem;
? ? }
? ? .page1 {
? ? ? ? margin-top: 300px;
? ? }
? ? .page3 {
? ? ? ? margin-top: 100px;
? ? }
? ? @page {
? ? ? ? size: A4 portrait;? /*A4紙，縱向打印*/
? ? ? ? margin: 0;/*去掉頁邊距*/
? ? }
}
這里用到了一個分頁的屬性
參考w3school
頁面效果
右鍵選擇打印
這里沒有加打印事件羊精，也可以自己加上去
