Vue实现浏览器打印功能的代码

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

@page{
size: auto A4 landscape;
margin: 3mm;
}
</style>

3.在需要添加打印功能的界面引入打印模板

import printUser from “./printUser”;

4.注册模板 printUser 和vueEasyPrint

components: { vueEasyPrint,printUser },

5.添加打印按钮。

el-button size="mini" type="text" icon="el-icon-edit"
 @click="printDemo(scope.row)" v-hasPermi="['system:user:edit']" >打印
    **<vue-easy-print** tableShow ref="easyPrint" v-show="false" >
     <template slot-scope="func">
     **<print-user** :getChineseNumber="func.getChineseNumber" :tableData="tabledata">**</print-user>**
     </template>
    **</vue-easy-print>**
 </el-button>

6.将要打印的内容传值到模板

printDemo(row) {
  this.reset();
  const userId = row.userId || this.ids;
  getUser(userId).then(response => {
  this.tabledata = response.data;
  //注：此处使用延时的原因是，防止点击打印都，打印内容还未渲染到模板，导致打印页面显示空白。
  setTimeout(() =>{
   this.$refs.easyPrint.print();
  },100);
  });
 },

7.打印模板接收值并赋值到打印模板（打印模板可根据业务需求自行调整）

export default {
 name: "printUser",								 
 2/3   首页 上一页 1 2 3 下一页 尾页