vue实现打印、批量打印

  • A+
所属分类:Web前端
摘要

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


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

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:'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 = 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>