1. 程式人生 > >js打印表格出現中斷現象怎麼處理

js打印表格出現中斷現象怎麼處理

前言

昨天靜姐交給我一個列印的需求,開始想著匯出到word在列印,後來洪肖哥說那樣太麻煩,直接在頁面上列印比較快,所以就有了這篇部落格。
實現過程:
1. 查詢資料庫,前臺得到json
2. 拼接表格
3. 列印

遇到的問題
  1. 列印預覽css失效
  2. 一頁列印不下,必須兩個頁面,但是第一個和第二個頁面中間出現表格中斷的現象,特別醜
解決方案

一、css失效的問題,我開始把樣式寫在了jsp上,但是表格是用js拼的,後來我把樣式寫在了拼接的語句中,就好了

二、將表格拆分成三個表格,因為我做的是值班簽到表格,所以每一頁有12天,分成三個表格,在使用下邊的語句,做強制的分頁處理,就解決了這個問題。

<div class="pageBreak" style="page-break-after: always" ></div>

page-break-after屬性解析

其實就是在表格結束的位置,加上分頁符

//列印方法
    $("#printWorkArrangementBtn").off().on("click",function(){
        var printHtml = document.getElementById("printDiv"
).innerHTML var wind = window.open("",'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no'); wind.document.body.innerHTML = printHtml; wind.print(); });
寫在最後

今天中午和同事聊天的時候,竟然發現了兩個同事和我生日是一天,居然這麼神奇~~~一個是90年的一個是88年的,瞬間感覺我們之間有一種神祕的牽引,以後抱大腿有著落了