vue print-js实现打印功能

1. 使用npm安装print插件

npm install print-js --save

2. 在需要的文件里面引入 import Print from ‘print-js’
3. 在页面调用打印

<template><div><el-button @click="printInfo">打印</el-button><div id="printBox" class="wrap-style" style="" v-show="printFlag"><div class="print-header"><div class="left-content" style="font-weight: 600;"><!-- 左侧内容，可以是文字或图片 -->信息</div><div class="right-content" style="font-weight: 600;"><!-- 右侧内容，可以是文字或图片 --><img src="@/assets/avature.png" alt="" /></div></div><div class="user-box">用户名：xxx 139xxxxxxxx</div><divclass="title"style="width: 100%; font-weight:600;font-size: 1.5em;text-align:center;margin-top: 10px;">用户列表</div><div class="info-box"><div style="font-size: 0.875em;"><span style="font-weight: 600;">打印日期：</span>{{ transDate(printMsg.date) }}</div></div><tablebordercellspacing="0"width="100%"style="margin-top:0;color:#000;border-color:#000;font-size: 0.875em;"><tr><td style="padding: 5px 2px;" width="40" align="center">序号</td><td style="padding: 5px 10px;" width="165" align="center">用户名</td><td style="padding: 5px 10px;" width="100" align="center">手机号</td><td style="padding: 5px 2px;" width="40" align="center">昵称</td><td style="padding: 5px 2px;" width="40" align="center">性别</td><td style="padding: 5px 10px;" align="center">详细信息</td></tr><tr v-for="(item, index) in printTableData" :key="index"><td style="padding: 5px 10px;" align="center">{{ index + 1 }}</td><td style="padding: 5px 10px;">{{ item.name }}</td><td style="padding: 5px 10px;" align="center">{{ item.mobile }}</td><td style="padding: 5px 10px;" align="center">{{ item.nickName }}</td><td style="padding: 5px 10px;" align="center">{{ item.sex }}</td><td style="padding: 5px 10px;">{{ item.detail }}</td></tr><tr><td colspan="2" align="center" style="font-weight: 600;">总数</td><td></td><td style="padding: 5px 10px;font-weight: 600;" align="center">{{ printMsg.total }}</td><td></td><td></td></tr></table></div></div></template>
<script>
import print from "print-js";
export default {data() {return {printFlag: false,printMsg: {},printTableData:[],printTimeout: null,printInterval: null}},methods:{async printInfo() {this.printFlag = true;let result = await getUserList();this.printMsg = result || {};let data = this.printMsg.items || [];this.printTableData = [];data.forEach(el => {this.printTableData.push({id: el.id,name: el.name,mobile: el.mobile,sex: el.sex,nickName: el.nickName,detial: el.detail});});this.printTimeout = setTimeout(() => {this.printInterval = setInterval(() => window.dispatchEvent(new Event("focus")),500);print({printable: "printBox",type: "html",style:".print-header {\n" +"    display: flex;\n" +"     border-bottom: 1px solid #000;\n" +"     align-items: center;\n" +"     height: 45px;\n" +"    justify-content: space-between;\n" +"  }\n" +"\n" +"  .left-content {\n" +"    color: #000;\n" +"    height: 100%;\n" +"    display: flex;\n" +"     align-items: center;\n" +"    font-size: 0.875em;\n" +"  }\n" +"\n" +"  .right-content {\n" +"    width: 74px;\n" +"    height: 30px;\n" +"  }" +"  .right-content img {\n" +"    width: 100%;\n" +"    height: 100%;\n" +"  }" +"  .user-box {\n" +"    font-size: 0.875em;\n" +"    color: #000;\n" +"    font-weight: 600;\n" +"    margin-top: 10px;\n" +"  }" +"  .info-box {\n" +"    font-size: 0.875em;\n" +"    color: #000;\n" +"    display: flex;\n" +"    margin-top: 10px;\n" +"    margin-bottom: 10px;\n" +"    justify-content: space-between;\n" +"  }" +"  .info-box.final {\n" +"    font-size: 0.875em;\n" +"    color: #000;\n" +"    display: flex;\n" +"    margin-top: 10px;\n" +"    justify-content: space-between;\n" +"  }" +"  .main-info-box {\n" +"    font-size: 0.875em;\n" +"    color: #000;\n" +"    border: 1px solid #000;\n" +"    padding: 10px;\n" +"    border-bottom: 0;\n" +"  }" +"  table td {\n" +"    font-size: 0.875em;\n" +"    color: #000;\n" +"    border: 1px solid #000;\n" +"  }" +"table { page-break-inside:auto;border-collapse: collapse; }\n" +"       tr { page-break-inside:avoid; page-break-after:auto; }" +"@page {\n" +"  margin: 0mm 10mm;\n" +"}",scanStyles: false,// targetStyles: ['*'],maxWidth: 754,onPrintDialogClose: () => {clearInterval(this.printInterval);console.log("关闭");this.printFlag = false;}});}, 500);},},beforeDestroy() {this.printTimeout && clearTimeout(this.printTimeout);this.printInterval && clearInterval(this.printInterval);}
}
</script>
<style lang="scss" scoped>
.wrap-style {width: 754px;
}
</style>