前端實現(xiàn)打印功能

打印樣式

一汇竭、添加打印樣式

為屏幕顯示和打印分別準備一個css文件瀑梗，如下所示：
用于屏幕顯示的css： <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
用于打印的css：<link rel="stylesheet" href="css/printstylesheet.css" media="print" />
import方式：
<style type="text/css">
@import url("css/printstylesheet.css") print;
</style>
直接把屏幕顯示樣式和打印樣式寫在一個css文件中：
@media print {}{
h1 {
color: black;
}
h2 {}{
color: gray;
}
}
@media print里面的內(nèi)容只對打印出來的內(nèi)容有效笼裳，之外的內(nèi)容就是屏幕顯示的樣式忠蝗。

其他：
創(chuàng)建一個不指定媒體類型的樣式表通常很有用（或者利用media="all"）嗤瞎。當你準備好定義一些特別用于打印的規(guī)則時，可以只創(chuàng)建一個單獨的樣式表频伤，使任何在打印時看起來不好的樣式都失效。使用這種方法的一個問題是必須確保打印機樣式實際上確實覆蓋了主樣式表芝此”镄ぃ可以使用！important.

二婚苹、打印樣式注意事項：

打印樣式中不推薦使用背景岸更，因為瀏覽器默認情況下并不能打印出CSS中的背景內(nèi)容，只有當瀏覽器被設置可以打印背景的情況下才能打印出背（ie的高級選項中可選）膊升。即使背景可以打印怎炊，它也可能蓋過疊在它上面的任何文本。尤其對于用彩色背景在顯示器上強烈對比的文本廓译，但是在黑白打印機上打印時會融合這一背景background：none评肆；去掉背景圖片和顏色》乔可以利用background-color屬性設置背景顏色為白色瓜挽，像這樣：background-color: white。使用background的快捷法也可以獲得相同的效果：background: white征绸。因此像background: white;這樣的聲明不僅設置了背景顏色為白色秸抚，而且消除了所有背景圖片速和。利用這個background的快捷屬性，你實現(xiàn)了兩個目的——設置了一個白色背景剥汤，并消除了圖片——只用很少的代碼颠放。
如果需要在打印內(nèi)容中出現(xiàn)圖片，請在HTML代碼中加入吭敢。
打印設置使用的是物理單位碰凶，所以尺寸最好不要用像素(px)，可以用pt也可以用cm鹿驼；
隱藏不需要的或是次要的內(nèi)容欲低。display：none；
盡量不要讓內(nèi)容浮動畜晰，有些瀏覽器打印浮動的div的過程中砾莱，會有一個麻煩，需要特別加以注意凄鼻。不要在打印的樣式表中浮動的塊腊瑟，像這樣：float: none;。例如块蚌，基于Gecko的瀏覽器
（例如Netscape 6+）闰非，當用戶用它來瀏覽一個打印輸出頁面時，它會截去浮動元素中的內(nèi)容峭范。這些內(nèi)容就不會被傳送到打印機财松，下一個頁面也不會有它的蹤影――它消失了。
盡可能的在HTML代碼中做好內(nèi)容重要的先后次序纱控，這樣在打印樣式中可以節(jié)省不少的麻煩辆毡。
打印與網(wǎng)頁不一樣，打印一定要留下白邊甜害，單位用英寸(in)胚迫。
要確保頁面上的所有文本以黑色打印，就用通配選擇器（見第54頁）和!important來創(chuàng)建把每個標簽都格式化為黑色文本的單個樣式：*{ color: ##000# !important }
在打印中顯示鏈接url的信息：利用一個高級的選擇器：after和一個高級的CSS屬性稱作content唾那，把不在屏幕上顯示的文本打印在一個樣式元素的末端访锻。
不幸的是，:after選擇器和content屬性技巧在Internet Explorer 6或者更早的版本上不起作用（到編寫本書為止闹获，在IE 7上也不行）期犬。但是它在Firefox和Safari上的確可以，因此你至少可以清楚地說明URL以便訪問者可以使用他們的瀏覽器避诽。
為了做到這點龟虎，給打印樣式表添加一個樣式，在每個鏈接后面打印出URL沙庐。你甚至可以添加其他文本項目比如圓括號鲤妥，使它更好看些： a:after {content: " (" attr(href) ") ";}

然而佳吞，這個CSS不區(qū)分外部或者內(nèi)部的鏈接，因此它也打印出到達同一個網(wǎng)站其他頁面的沒用的相對文檔鏈接：“訪問主頁（../../index. html）棉安〉装猓”利用一點點CSS 3魔法，就可以強制這個樣式只打印絕對的URL（即以http://開頭的那些）贡耽，像這樣：
a[href^="http://"]:after {content: " (" attr(href) ") ";}

10.給打印添加分頁符：兩種被廣泛認可的屬性是page-break-before和page-break-after衷模。
page-break-before告訴網(wǎng)頁瀏覽器在一個指定樣式之前插入一個分頁符。利用page-break-before 屬性使圖片打印在一張新頁面上蒲赂，并且適合整張頁面阱冶。要使一個元素作為打印頁上的最后一個項目顯示，就給那個元素的樣式添加page-break-after: always滥嘴。

創(chuàng)建兩個類樣式木蹬，以類似于.break_after和.break_before的名字來命名，像這樣：
.break_before { page-break-before: always; }
.break_after { page-break-after: always; }

然后你可以選擇性地把這些樣式應用給應該打印在網(wǎng)頁頂部或者底部的元素若皱。

三镊叁、測試打印樣式
通常來說我們不可能用打印機來進行測試，在IE瀏覽器菜單欄“文件”中有“打印預覽”是尖，谷歌瀏覽器也可以意系，可以通過這打印預覽來做測試泥耀。

打印實現(xiàn)

方式一：直接使用window.print();

（1）首先獲得元素的html內(nèi)容（這里建議如果有樣式最好是用內(nèi)聯(lián)樣式的方式）

var newstr = document.getElementById(myDiv).innerHTML;//得到需要打印的元素HTML

（2）保存當前頁面的整個html饺汹，因為window.print()打印操作是打印當前頁的所有內(nèi)容，所以先將當前頁面保存起來痰催，之后便于恢復兜辞。

var oldstr = document.body.innerHTML;//保存當前頁面的HTML

（3）把當前頁面替換為打印內(nèi)容HTML

document.body.innerHTML = newstr;

（4）執(zhí)行打印操作

window.print();

（5）還原當前頁面

document.body.innerHTML = oldstr;

方法例：

//myDiv為需要打印的元素ID

function printpage(myDiv){
var newstr = document.getElementById(myDiv).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = newstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}

方式二：window.open("",..)新開瀏覽器對話框打印。

（1）獲得需要打印的元素HTML

var printHtml = document.getElementById("myDiv").innerHTML;//這個元素的樣式需要用內(nèi)聯(lián)方式夸溶，不然在新開打印對話框中沒有樣式

（2）打開一個窗口逸吵，且內(nèi)容設置為空。

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');

（3）將新窗口內(nèi)容填充為需要打印的HTML內(nèi)容

wind.document.body.innerHTML = printHtml;

（4）打印

wind.print();

方法例：

//myDiv為需要打印的元素ID

function printpage(myDiv){
var printHtml = document.getElementById(myDiv).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();
return false;
}

帶有echart圖的打印

方法：將echart裝換成base64缝裁，追加到相應的打印document中,按照圖片格式打印出來

 // 獲取echarts圖的base64編碼
        var picBase64Info = myChart.getDataURL();
        // 添加img標簽 crossorigin='anonymous',
        $('#airPic').before("<img src='"+picBase64Info+"' >");