vue+element实现单条打印、批量打印(图片)

最新推荐文章于 2025-10-06 06:35:25 发布

原创最新推荐文章于 2025-10-06 06:35:25 发布 · 3.2k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

前端开发专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何在前端使用JavaScript实现批量打印功能，包括通过`window.print()`和`document.execCommand('print')`方法触发打印预览。文章提供了一个示例代码，展示了如何选择表格中的数据并将其转换为打印内容，同时使用媒体查询调整打印样式。此外，还涉及了在预览和打印过程中页面内容的切换与刷新操作。

winodw.print()方法

print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。

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

大家进行代码简单的修改，即可使用，代码思路来源“前端劝退师™”，很实用的操作！