摘要：今天遇到一個需求，看起來也比較簡單，就是實現一個打印功能。有兩種方法來實現，一種是利用的媒體查詢，另一種則是使用。

今天遇到一個需求，看起來也比較簡單，就是實現一個打印功能。頁面中有一個表單，將表單里的數據對應添加到表格中，然后點擊打印按鈕，實現預覽打印，這里我用的是iview框架，如下圖所示:

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

我這里采用的是第一種辦法，我在stackoverflow上大致搜了一下，曾經有人問過打印的問題。如下圖所示:

總的說來，實現打印的方式也無非就是這兩種方法，當然這也不排除使用插件，我看了下回答，有一個利用jquery封裝的插件，大致去看了下這個插件，也并沒有達到我的要求，而且代碼調用傳的參數也有些多，索性我就放棄了。想要了解這個插件的可以前往這個網址:[https://github.com/jasonday/p...]

首先說下為什么用js方式實現打印不行，因為在這個系統當中，我寫了好幾個樣式文件，如果使用js方式來實現打印，那么就勢必要引入多個css，而且css文件還不好引入，這是其一，其二就是還要操作DOM取得要打印的內容。以下是js實現打印的具體代碼:

 function Print(el){
    var mywindow = window.open("", "", "height=800,width=1000");
    mywindow.document.write("");
    mywindow.document.write("");
    mywindow.document.write("
" + document.title  + "
");
    //代碼的著重點就在此處
    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專門有個與打印有關的媒體查詢，代碼結構如下:

@media print{
  //具體代碼
}

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

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

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

//這里是不打印的區域
//這里是打印的區域

然后css就這樣寫:

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

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

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

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

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

print() {
    this.printHead = [
           {
              title: "企業/團隊名稱",
              key: "client_name"
           },
           {
              title: "法人/負責人",
              key: "lp_name"
           },
           {
               title: "團隊人數",
               key: "number_of_employees"
           },
           {
               title: "聯系電話",
               key: "contact_information"
           },
           {
              title: "QQ/微信",
              key: "qq_we_chat"
           },
           {
              title: "注冊地址",
              key: "registered_address"
           },
           {
              title: "成立時間",
              key: "time_of_establishment"
           },
           {
              title: "審核狀態",
              key: "status"
            },
           {
              title: "申請時間",
              key: "created_time"
           },
          {
            title: "經營簡介",
            key: "enterprise_introduction"
          },
          {
             title: "審核意見",
             key: "reason"
          }
       ];
       this.printData = [];
       this.printData.push(this.curAudit);
       this.printing = true;
       setTimeout(function(){
          window.print();
       },1000)
},

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

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

頁面需要引入:

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"
            }

          ]
        }
    }
})

運行效果如下圖所示:

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

鄙人創建了一個QQ群，供大家學習交流，希望和大家合作愉快，互相幫助，交流學習，以下為群二維碼：