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

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

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

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

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

        });;

    }

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

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

但是這樣會存在一個問題，因為我們只想要打印部分內(nèi)容，但是在打印過程中，他的其他的樣式還會在，如上圖，我們想要在打印的時候內(nèi)容居中，這里我們就需要重新設(shè)置樣式，這里有幾種辦法。

第一種 ，直接不用而jqprint，全部使用原生js的和，小編不建議這樣寫，因為一方面原生js編寫代碼量會比較大而且有瀏覽器兼容問題，容錯率比較低，前面的代碼出了問題，后面的代碼執(zhí)行不了。

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

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

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

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

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

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

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

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