vue列表在线打印pdf（vue-easy-print）

安装：

npm install vue-easy-print --save

加载模板：

<button @click="printDemo">测试打印</button>
<vue-easy-print v-show="false" ref="easyPrint" :table-show="false" :space-row="true">
   <demo :table-data="tableData"/>
</vue-easy-print>

页面引用：

import vueEasyPrint from 'vue-easy-print'
import demo './demo'

export default {
    components: {
        vueEasyPrint,
        demo
    },
    methods:{
	  printDemo(){
	    this.$refs.easyPrint.print()
	  }
	}
}

demo页面

表格可根据自己需求自行设计，此页面仅供参考！

<template>
  <div>
    <div class="tab_company_out">
      <div style="margin-bottom:10px;">
        <span style="font-size: 24px;text-align: center;">大标题</span>
      </div>
      <table>
        <tr>
          <th width="12%"></th>
          <th width="15%"></th>
          <th width="15%"></th>
          <th width="15%"></th>
        </tr>
        <!-- 每页显示onePageRow条数据 -->
        <tr v-for="(row,index) in tableData" :key="index">
          <td align="center"></td>
          <td align="center"></td>
          <td align="center">/td>
          <td align="center"></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  props: {
    // 接受的打印数据
    tableData: {}
  }
}
</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;
}

h3 {
  font-size: 14px;
}

.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;
}

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

table th {
  text-align: center;
}

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

.lu {
  display: inline-block;
  padding-top: 10px;
}

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

实现效果：