前端工作中,有時(shí)會(huì)需要使用打印功能，在打印過(guò)程中一般是不會(huì)攜帶你頁(yè)面中的樣式的，如何保證打印的樣式今天文匯軟件小編來(lái)和大家聊一聊。
首先先看這個(gè)項(xiàng)目，這里面就有打印，這里我們使用jqprint進(jìn)行打印。
代碼如下圖，注意 這里的 importCSS這個(gè)參數(shù)必須得是true,否則無(wú)法使用樣式，默認(rèn)的打印一般是只會(huì)識(shí)別出內(nèi)聯(lián)樣式的，所以這里需要注意一下。
function a() {
$("#ddd").jqprint({
debug: false, //如果是true則可以顯示iframe查看效果（iframe默認(rèn)高和寬都很小，可以再源碼中調(diào)大），默認(rèn)是false
importCSS: true, //true表示引進(jìn)原來(lái)的頁(yè)面的css，默認(rèn)是true。（如果是true，先會(huì)找$("link[media=print]")，若沒(méi)有會(huì)去找$("link")中的css文件）
printContainer: true, //表示如果原來(lái)選擇的對(duì)象必須被納入打印（注意：設(shè)置為false可能會(huì)打破你的CSS規(guī)則）。
operaSupport: true //表示如果插件也必須支持歌opera瀏覽器，在這種情況下，它提供了建立一個(gè)臨時(shí)的打印選項(xiàng)卡。默認(rèn)是true
});;
}
除此之外我們還需要掛載這個(gè)dom，另外引入jquery.jqprint.js這個(gè)js,還有有些小伙伴在引用的時(shí)候控制臺(tái)會(huì)報(bào)Cannot read property 'opera' of undefined的問(wèn)題，這是你所引用的jquery版本與jquery.jqprint.js的版本不兼容的原因，在這里小編為大家推薦使用jquery-migrate-1.2.1.min.js這個(gè)版本的js
這樣我們就可以把自己頁(yè)面的樣式在打印時(shí)打印出來(lái)了
但是這樣會(huì)存在一個(gè)問(wèn)題，因?yàn)槲覀冎幌胍蛴〔糠謨?nèi)容，但是在打印過(guò)程中，他的其他的樣式還會(huì)在，如上圖，我們想要在打印的時(shí)候內(nèi)容居中，這里我們就需要重新設(shè)置樣式，這里有幾種辦法。
第一種 ，直接不用而jqprint，全部使用原生js的和，小編不建議這樣寫(xiě)，因?yàn)橐环矫嬖鷍s編寫(xiě)代碼量會(huì)比較大而且有瀏覽器兼容問(wèn)題，容錯(cuò)率比較低，前面的代碼出了問(wèn)題，后面的代碼執(zhí)行不了。
第二種 ，使用內(nèi)聯(lián)樣式，但是在html添加后整體的頁(yè)面樣式也會(huì)改動(dòng)，小編也不推薦。
第三種，利用css的@media print屬性來(lái)設(shè)置打印時(shí)的樣式，優(yōu)點(diǎn)， 頁(yè)面剛加載時(shí)和打印時(shí)都會(huì)按照不同的樣式編譯，缺點(diǎn)，打印結(jié)束后，不會(huì)再重新加載原來(lái)的瀏覽器樣式，導(dǎo)致頁(yè)面整體崩潰，小編也不怎么推薦。
第四種，單獨(dú)再寫(xiě)一個(gè)文件，這個(gè)文件存放所有的打印時(shí)的樣式，并且只有在打印時(shí)才會(huì)調(diào)用，小編比較推薦。
上圖之所以會(huì)出現(xiàn)這種樣式，主要是我們?cè)O(shè)定了打印區(qū)域只有右邊所綁定的元素，但是這個(gè)綁定的元素有margin值，如下圖，這是瀏覽器代碼
，所以我們只要設(shè)定在打印時(shí)加載的樣式表去掉這個(gè)margin值就好了，如下圖
我們只需要在對(duì)應(yīng)的樣式表加上media="print"，就可以了，然后修改對(duì)應(yīng)的樣式，這樣頁(yè)面就能按照我們需要的樣式進(jìn)行打印了。
頁(yè)面在打印時(shí)link midia的屬性比@media print的級(jí)別高，而且還可以設(shè)置不同的樣式瀏覽器也不會(huì)崩潰，所以小編推薦這個(gè)方法。
好了，今天就是小編分享的文章，你學(xué)會(huì)了嗎，如想了解更多就來(lái)文匯軟件看看吧。
