使用的是vue-easy-print 打印插件
可以支持分页打印。
转载https://download.csdn.net/download/qq_36845014/10807027?utm_source=bbsseo

在开发是 想要打印功能 但是打印数据不想显示出来 在打印的时候要打印初数据

第一步引入vue-easy-print
npm install vue-easy-print
第二部在页面以引入组件方式引入文件

 <el-button type="primary" style="float:right" size="mini" @click="sortingListPrint">打印交接单</el-button>
 // sortingListPrint调用接口获取打印数据
 <div>
      <vue-easy-print tableShow ref="easyPrint" >
          <div id="printTable">
            <demo :tableData="dialogData"  @clickPrint="clickPrint"></demo>
          </div>
      </vue-easy-print>
   </div>
   
import vueEasyPrint from "vue-easy-print";
import demo from "./demo";

components:{
    vueEasyPrint,
    demo
  },
clickPrint(){
     let vm = this
     vm.$nextTick(function(){
       vm.$refs.easyPrint.print();
     })
   },

dialogData是表格打印的数据，clickPrint是我组件间通信方法

因为需要不显示数据就要实现打印所以使用css来控制

<style>
  #printTable{display:none}
  @media print {
      #printTable{
          display:block;
      }
  }
</style>

顺序不可颠倒 @media print媒体查询 打印的时候显示数据
因为页面渲染问题 需要渲染完毕才能执行print打印 所以使用watch加nextTick方式实现
demo组件中
监控列表展示数据 渲染完毕执行下一步

watch:{
    tableData: function(){
      this.$nextTick(function(){
        console.log(this.tableData)
        this.$emit('clickPrint')
      })
    }
  },

再次特别感谢 qq_36845014 所有实现方式都是在此基础上的再次开发
demo.vue

<template>
    <div>
        <div v-for="page in pages" :key="page">
            <!-- 分页 -->
            <div class='tab_company_out'>
                <h2>外送清单</h2>
                <table cellpadding='0' cellspacing='0'>
                    <tr>
                        <th width='10%'>条码</th>
                        <th width='10%'>送检单位</th>
                        <th width='10%'>外送单位</th>
                        <th width='20%'>项目</th>
                        <th width='6%'>姓名</th>
                        <th width='6%'>性别</th>
                        <th width='6%'>年龄</th>
                        <th width='12%'>预计出报告时间</th>
                        <th width='6%'>分拣人</th>
                        <th width='12%'>分拣时间</th>
                    </tr>
                    <!-- 每页显示onePageRow条数据 -->
                    <tr v-for="(row,index) in tableData.slice((page-1)*onePageRow,page*onePageRow)" :key="index">
                        <!-- <td>{
  {(page-1)*onePageRow + index + 1}}</td> -->
                        <td>{
  {row.barcode}}</td>
                        <td>{
  {row.sampleSourceName}}</td>
                        <td>{
  {row.unitName}}</td>
                        <td>{
  {row.sfStr}}</td>
                        <td>{
  {row.name}}</td>
                        <td>{
  {row.sex}}</td>
                        <td>{
  {row.age}}</td>
                        <td>{
  {row.maxReportDate}}</td>
                        <td>{
  {row.sortName}}</td>
                        <td>{
  {row.sortTime}}</td>
                    </tr>
                    <!-- 插入空白行 -->
                    <template v-if="blankLines===true && tableData.slice((page-1)*onePageRow,page*onePageRow).length<onePageRow">
                        <tr v-for="d in (onePageRow-tableData.slice((page-1)*onePageRow,page*onePageRow).length)" :key="`_${d}_`">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </template>
                </table>
                <ul class='lu'>
                    <li>签字：
                        
                    </li>
                    <li>日期：
                        
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>


<script>
export default {
  name: "demo",
  // 制作打印模版组件时，props区域尽量保留。
  props: {
    // 接受的打印数据
    tableData: {},

    // 每页多少行
    onePageRow: {
      type: Number,
      default: 15
    },
    // 是否插入空白行
    blankLines: {
      type: Boolean,
      default: true
    },

    getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
  },
  data() {
    return {};
  },
  watch:{
    tableData: function(){
      this.$nextTick(function(){
        this.$emit('clickPrint')
      })
    }
  },
  computed: {
    pages() {
      // 求当前数据能打印的页数
      var pages_ = Math.ceil(this.tableData.length / this.onePageRow); // 向上取整数
      return pages_ <= 0 ? 1 : pages_;
      // return 1;
    },
    chineseTotal() {
      // 计算中文合计，如果忘记传入
      return this.getChineseNumber != null
        ? this.getChineseNumber(this.tableData.total_amount)
        : "您还没有传入getChineseNumber";
    }
  },

  methods: {
    test() {
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-family: "微软雅黑";
  font-size: 12px;
}

.tab_company_out {
  text-align: center;
  width: 100%;
  margin: auto;
  page-break-after: always;
  margin-bottom: 20px
}

h2 {
  padding: 20px;
  font-size: 18px
}

.dan {
  text-align: center;
  position: relative;
}

.dan span {
  position: absolute;
  right: 0;
}

p {
  overflow: hidden;
  padding: 10px 0;
}

p span {
  float: left;
}

p span ins {
  text-decoration: underline;
}

p time {
  float: right;
}

table {
  width: 100%;
  border: none;
  border-bottom: 1px solid #000;
}

table tr td {
  border: 1px solid #000;
  border-bottom: none;
  border-right: none;
  height: 20px;
  line-height: 20px;
  text-align: center
}

table tr td:last-of-type,
table tr th:last-of-type {
  border-right: 1px solid #000;
}

table tr th {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  text-align: center
}

table tr th:nth-child(2) {
  width: 0;
}

.lu {
  display: inline-block;
  padding-top: 10px;
  display: flex;
  justify-content: space-around;
}

.lu li {
  float: left;
  text-align: left;
  margin-right: 15px;
}

.lu li label {
  width: 100px;
  display: inline-block;
}

.lu li:last-of-type {
  margin-right: 0;
}
</style>