vue print-js实现打印功能
npm install print-js --save
<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>
<div
class="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>
<table
border
cellspacing="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>