前端工作中,有時(shí)會(huì)需要使用打印功能，在打印過程中一般是不會(huì)攜帶你頁面中的樣式的，如何保證打印的樣式今天文匯軟件小編來和大家聊一聊。

首先先看這個(gè)項(xiàng)目，這里面就有打印，這里我們使用jqprint進(jìn)行打印。

代碼如下圖，注意  這里的 importCSS這個(gè)參數(shù)必須得是true,否則無法使用樣式，默認(rèn)的打印一般是只會(huì)識別出內(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)原來的頁面的css，默認(rèn)是true。（如果是true，先會(huì)找$("link[media=print]")，若沒有會(huì)去找$("link")中的css文件）

            printContainer: true, //表示如果原來選擇的對象必須被納入打?。ㄗ⒁猓涸O(shè)置為false可能會(huì)打破你的CSS規(guī)則）。

            operaSupport: true //表示如果插件也必須支持歌opera瀏覽器，在這種情況下，它提供了建立一個(gè)臨時(shí)的打印選項(xiàng)卡。默認(rèn)是true

        });;

    }

除此之外我們還需要掛載這個(gè)dom，另外引入jquery.jqprint.js這個(gè)js,還有有些小伙伴在引用的時(shí)候控制臺會(huì)報(bào)Cannot read property 'opera' of undefined的問題，這是你所引用的jquery版本與jquery.jqprint.js的版本不兼容的原因，在這里小編為大家推薦使用jquery-migrate-1.2.1.min.js這個(gè)版本的js

這樣我們就可以把自己頁面的樣式在打印時(shí)打印出來了

但是這樣會(huì)存在一個(gè)問題，因?yàn)槲覀冎幌胍蛴〔糠謨?nèi)容，但是在打印過程中，他的其他的樣式還會(huì)在，如上圖，我們想要在打印的時(shí)候內(nèi)容居中，這里我們就需要重新設(shè)置樣式，這里有幾種辦法。

第一種 ，直接不用而jqprint，全部使用原生js的和，小編不建議這樣寫，因?yàn)橐环矫嬖鷍s編寫代碼量會(huì)比較大而且有瀏覽器兼容問題，容錯(cuò)率比較低，前面的代碼出了問題，后面的代碼執(zhí)行不了。

第二種 ，使用內(nèi)聯(lián)樣式，但是在html添加后整體的頁面樣式也會(huì)改動(dòng)，小編也不推薦。

第三種，利用css的@media print屬性來設(shè)置打印時(shí)的樣式，優(yōu)點(diǎn)，  頁面剛加載時(shí)和打印時(shí)都會(huì)按照不同的樣式編譯，缺點(diǎn)，打印結(jié)束后，不會(huì)再重新加載原來的瀏覽器樣式，導(dǎo)致頁面整體崩潰，小編也不怎么推薦。

第四種，單獨(dú)再寫一個(gè)文件，這個(gè)文件存放所有的打印時(shí)的樣式，并且只有在打印時(shí)才會(huì)調(diào)用，小編比較推薦。

上圖之所以會(huì)出現(xiàn)這種樣式，主要是我們設(shè)定了打印區(qū)域只有右邊所綁定的元素，但是這個(gè)綁定的元素有margin值，如下圖，這是瀏覽器代碼

，所以我們只要設(shè)定在打印時(shí)加載的樣式表去掉這個(gè)margin值就好了，如下圖

我們只需要在對應(yīng)的樣式表加上media="print"，就可以了，然后修改對應(yīng)的樣式，這樣頁面就能按照我們需要的樣式進(jìn)行打印了。

頁面在打印時(shí)link midia的屬性比@media print的級別高，而且還可以設(shè)置不同的樣式瀏覽器也不會(huì)崩潰，所以小編推薦這個(gè)方法。

好了，今天就是小編分享的文章，你學(xué)會(huì)了嗎，如想了解更多就來文匯軟件看看吧。