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