Vue+element realizes single printing and batch printing (picture)

winodw.print() method

The print() method is used to print the contents of the current window. Calling the print() method will generate a print preview popup, allowing the user to set the print request. The simplest printing is to call window.print() directly, of course, the same effect can be achieved by using document.execCommand('print'). By default, all content in the body of the page is printed.

<template>
  <div class="dashboard-container">
    <el-button @click='allPrint'>批量打印</el-button>
    <el-table :data="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="scope.row.src" class="table_img">
        </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="item.src" class="print_img" v-for="item in multipleSelection" :key='item.id' />
    </div>
    <!--endprint-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
            id: 1,
            src:'94/4d3ea53c084bad6931a56d5158a48jpeg'
          },
          {
            id: 2,
            src:'94/4d3ea53c084bad6931a56d5158a48jpeg'
          },
          {
            id: 3,
            src:'94/4d3ea53c084bad6931a56d5158a48jpeg'
          }
        ],
        multipleSelection: [],   //存放将要打印的数据
      }
    },
    methods: {
      print(row={}) {
        if(row.src){
          this.multipleSelection.push(row)
        }
        this.$nextTick(()=>{
          var bdhtml=window.document.body.innerHTML;       // 获取body的内容
          var jubuData = 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; 
    }
    #printcontent{
      width: 100%;
    }
    .print_img{
      display: block;
      width: 100%;
      height: 100%;
      margin: auto auto;
    }
  }

</style>

You can use it by simply modifying the code. The code idea comes from "Front-End Persuasion Teacher™​​​​​​", very practical operation!