vue實作列印、批量列印

vue+element實作單條列印、批量列印(圖片)

winodw.print()方法

print() 方法用于列印當前視窗的內容，呼叫 print() 方法會產生一個列印預覽彈框，讓用戶可以設定列印請求，最簡單的列印就是直接呼叫window.print()，當然用 document.execCommand('print') 也可以達到同樣的效果，默認列印頁面中body里的所有內容，

<template>
  <div >
    <el-button @click='allPrint'>批量列印</el-button>
    <el-table :data="https://www.cnblogs.com/baller/archive/2021/09/22/tableData" style="width: 100%" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="id" width="180">
      </el-table-column>
      <el-table-column label="圖片" width="180">
        <template slot-scope="scope">
          <img :src="https://www.cnblogs.com/baller/archive/2021/09/22/scope.row.src" >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="print(scope.row)" type="text" size="small">列印</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--startprint-->
    <div id="printcontent" ref='printcontent'>
      <img :src="https://www.cnblogs.com/baller/archive/2021/09/22/item.src"  v-for="item in multipleSelection" :key='item.id' />
    </div>
    <!--endprint-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
            id: 1,
            src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
          },
          {
            id: 2,
            src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
          },
          {
            id: 3,
            src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
          }
        ],
        multipleSelection: [],   //存放將要列印的資料
      }
    },
    methods: {
      print(row={}) {
        if(row.src){
          this.multipleSelection.push(row)
        }
        this.$nextTick(()=>{
          var bdhtml=window.document.body.innerHTML;       // 獲取body的內容
          var jubuData = https://www.cnblogs.com/baller/archive/2021/09/22/document.getElementById("printcontent").innerHTML; //獲取要列印的區域內容
          window.document.body.innerHTML= jubuData;        
          window.print();                                  // 呼叫瀏覽器的列印功能
          window.document.body.innerHTML=bdhtml;           // body替換為原來的內容
          window.location.reload();                        //重繪頁面，如果不重繪頁面再次點擊不生效或列印使用新視窗實作列印
        })
      },
      allPrint(){
        this.print()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

<style lang="scss">
  .dashboard-container {
    .table_img {
      width: 50px;
      height: 50px;
    }
    #printcontent{
      display: none;
    }
  }
  //使用媒體查詢    設定預覽時的樣式
  @media print{
    @page {
      margin: 0;
      size: portrait;   //設定列印布局portrait為縱向；landscape為橫向
    }
    #printcontent{
      width: 100%;
    }
    .print_img{
      display: block;
      width: 100%;
      height: 100%;
      margin: auto auto;
    }
  }

</style>

標籤：其他

上一篇：決議Markdown檔案生成React組件檔案

下一篇：jQuery-02