摘要：今天遇到一個(gè)需求，看起來(lái)也比較簡(jiǎn)單，就是實(shí)現(xiàn)一個(gè)打印功能。有兩種方法來(lái)實(shí)現(xiàn)，一種是利用的媒體查詢，另一種則是使用。

今天遇到一個(gè)需求，看起來(lái)也比較簡(jiǎn)單，就是實(shí)現(xiàn)一個(gè)打印功能。頁(yè)面中有一個(gè)表單，將表單里的數(shù)據(jù)對(duì)應(yīng)添加到表格中，然后點(diǎn)擊打印按鈕，實(shí)現(xiàn)預(yù)覽打印，這里我用的是iview框架，如下圖所示:

實(shí)現(xiàn)打印的功能，很明顯就要用到window.print()方法，但是如果不做限制，那么這個(gè)方法就會(huì)將頁(yè)面內(nèi)的所有內(nèi)容給打印出來(lái)，這肯定是不滿足需求的。有兩種方法來(lái)實(shí)現(xiàn)，一種是利用CSS的媒體查詢，另一種則是使用js。

我這里采用的是第一種辦法，我在stackoverflow上大致搜了一下，曾經(jīng)有人問(wèn)過(guò)打印的問(wèn)題。如下圖所示:

總的說(shuō)來(lái)，實(shí)現(xiàn)打印的方式也無(wú)非就是這兩種方法，當(dāng)然這也不排除使用插件，我看了下回答，有一個(gè)利用jquery封裝的插件，大致去看了下這個(gè)插件，也并沒(méi)有達(dá)到我的要求，而且代碼調(diào)用傳的參數(shù)也有些多，索性我就放棄了。想要了解這個(gè)插件的可以前往這個(gè)網(wǎng)址:[https://github.com/jasonday/p...]

首先說(shuō)下為什么用js方式實(shí)現(xiàn)打印不行，因?yàn)樵谶@個(gè)系統(tǒng)當(dāng)中，我寫了好幾個(gè)樣式文件，如果使用js方式來(lái)實(shí)現(xiàn)打印，那么就勢(shì)必要引入多個(gè)css，而且css文件還不好引入，這是其一，其二就是還要操作DOM取得要打印的內(nèi)容。以下是js實(shí)現(xiàn)打印的具體代碼:

 function Print(el){
    var mywindow = window.open("", "", "height=800,width=1000");
    mywindow.document.write("");
    mywindow.document.write("");
    mywindow.document.write("
" + document.title  + "
");
    //代碼的著重點(diǎn)就在此處
    mywindow.document.write(document.getElementById(el).innerHTML);
    mywindow.document.write("");

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();
    return true;
}

所以我索性采用了第二種方法，就是利用css媒體查詢，css專門有個(gè)與打印有關(guān)的媒體查詢，代碼結(jié)構(gòu)如下:

@media print{
  //具體代碼
}

我們只需要將不打印的元素的display屬性設(shè)置為none,打印的元素的display屬性設(shè)置為block即可。這個(gè)代碼里還涉及到設(shè)置元素寬度的單位，目前我只知道有cm和mm。另外還有一個(gè)@page屬性設(shè)置，想了解該屬性可自行百度。有人曾說(shuō)有一個(gè)最簡(jiǎn)便的辦法就是在媒體查詢里面這樣寫:

@media print{
  *{
     display:none;
   }
  #myPrint{
     display:block;
  }
}

我不知道他是怎么運(yùn)行出效果的，但至少我是沒(méi)有成功，我只能通過(guò)給不需要打印的元素添加樣式類noprint,給需要打印的元素加樣式類print。像如下這樣:

//這里是不打印的區(qū)域
//這里是打印的區(qū)域

然后css就這樣寫:

@media print{
   .noprint{
       display:none;
   }
   .print{
       display:block;
   }
}

值得注意的就是如果頁(yè)面中有元素沒(méi)有設(shè)置display:none,而且它又在頁(yè)面中沒(méi)有視覺(jué)顯示，但是卻有定位屬性，就需要將它的定位屬性給去掉，如下圖所示:

我的按鈕代碼大致是這樣的:

我利用iview的table組件來(lái)作為打印的元素，如下圖所示:

printHead和printData就是要打印的數(shù)據(jù)，print方法里面我是如此寫的:

print() {
    this.printHead = [
           {
              title: "企業(yè)/團(tuán)隊(duì)名稱",
              key: "client_name"
           },
           {
              title: "法人/負(fù)責(zé)人",
              key: "lp_name"
           },
           {
               title: "團(tuán)隊(duì)人數(shù)",
               key: "number_of_employees"
           },
           {
               title: "聯(lián)系電話",
               key: "contact_information"
           },
           {
              title: "QQ/微信",
              key: "qq_we_chat"
           },
           {
              title: "注冊(cè)地址",
              key: "registered_address"
           },
           {
              title: "成立時(shí)間",
              key: "time_of_establishment"
           },
           {
              title: "審核狀態(tài)",
              key: "status"
            },
           {
              title: "申請(qǐng)時(shí)間",
              key: "created_time"
           },
          {
            title: "經(jīng)營(yíng)簡(jiǎn)介",
            key: "enterprise_introduction"
          },
          {
             title: "審核意見(jiàn)",
             key: "reason"
          }
       ];
       this.printData = [];
       this.printData.push(this.curAudit);
       this.printing = true;
       setTimeout(function(){
          window.print();
       },1000)
},

這里我想大概是因?yàn)轫?yè)面在渲染iview組件的原因，所以必須要延遲運(yùn)行打印方法window.print()才會(huì)真正執(zhí)行到打印功能。但是我卻碰到一個(gè)很奇怪的問(wèn)題，如下圖所示:

這個(gè)問(wèn)題足足困擾了我一下午，我一下午都在想為什么會(huì)出現(xiàn)這樣的結(jié)果，后來(lái)我終于明白了，是iview的樣式布局造成的，iview的底層用了兩個(gè)table元素來(lái)封裝這個(gè)表格組件，我沒(méi)辦法，只好選擇不用iview的table組件，自己手寫table元素以及樣式（如果有更好的方法希望有大佬指點(diǎn)迷津）。為此我還特意寫了一個(gè)demo來(lái)測(cè)試，測(cè)試代碼如下:

頁(yè)面需要引入:

css:

.noprint{
    display: block;
    margin:20px auto;
}

.table{
   width: 100%;
}

.table th,.table td{
   text-align: center;
}

@media print{
  .noprint{
     display: none;
   }
   .print{
     display: block;
   }
}

html:

   

    
   
   打印

js:

new Vue({
   el: "#app",
   data(){
      return {
        columns1: [
            {
                title: "Name",
                key: "name"
            },
            {
                title: "Age",
                key: "age"
            },
            {
                title: "Address",
                key: "address"
            },
            {
                title: "date",
                key: "date"
            }
      ],
      data1: [
            {
                name: "John Brown",
                age: 18,
                address: "New York No. 1 Lake Park",
                date: "2016-10-03"
            },
            {
                name: "Jim Green",
                age: 24,
                address: "London No. 1 Lake Park",
                date: "2016-10-01"
            },
            {
                name: "Joe Black",
                age: 30,
                address: "Sydney No. 1 Lake Park",
                date: "2016-10-02"
            },
            {
                name: "Jon Snow",
                age: 26,
                address: "Ottawa No. 2 Lake Park",
                date: "2016-10-04"
            }

          ]
        }
    }
})

運(yùn)行效果如下圖所示:

當(dāng)然如果有大佬知道還有更好的辦法，希望指點(diǎn)一下，也希望此文能幫助遇到此坑的人。另外第一次寫文章，如有排版等不好，敬請(qǐng)諒解。

鄙人創(chuàng)建了一個(gè)QQ群，供大家學(xué)習(xí)交流，希望和大家合作愉快，互相幫助，交流學(xué)習(xí)，以下為群二維碼：