打印功能的实现离不开 vue-print-nb 包
import print from 'vue-print-nb'导入之后 注册自定义指令
directives: {
print,
},注册完毕后，该文件内就会多出一个v-print指令，只需要把指令绑定到点击下载的地方，绑定的值是要打印的区域
案例代码如下 这个代码可以不用看 或者找代码中标
<template>
<div class="dashboard-container" id="myPrint">
<div class="primaryBtn">
// 此处绑定的代码 v-print="'#appContainer'" 这个# 后面的就是要打印的区域的id
<el-button type="primary" @click="onPrimary" v-print="'#appContainer'"
>打印</el-button
>
</div>
<div class="app-container" id="appContainer">
<el-card>
<el-breadcrumb separator="/" class="titInfo">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>
<router-link :to="{ path: '/employees' }">员工管理</router-link>
</el-breadcrumb-item>
<el-breadcrumb-item>打印</el-breadcrumb-item>
</el-breadcrumb>
<div>
<h2 class="centInfo">员工信息表</h2>
<table cellspacing="0" width="100%" class="tableList">
<tr class="title">
<td colspan="8" class="centInfo">基本信息</td>
</tr>
<tr>
<th style="width: 10%">姓名</th>
<td colspan="6" style="width: 80%">{
{ formData.username }}</td>
<td rowspan="5" style="width: 10%">
<img
style="width: 155px; height: 218px"
:src="formData.staffPhoto"
/>
</td>
</tr>
<tr>
<th>性别</th>
<td colspan="6">{
{ formData.sex }}</td>
</tr>
<tr>
<th>手机</th>
<td colspan="6">{
{ formData.mobile }}</td>
</tr>
<tr>
<th>出生日期</th>
<td colspan="6">{
{ formData.dateOfBirth | formatDate }}</td>
</tr>
<tr>
<th>最高学历</th>
<td colspan="6">{
{ formData.theHighestDegreeOfEducation }}</td>
</tr>
<tr>
<th style="width: 10%">是否可编辑</th>
<td style="width: 35%">{
{ formData.isItEditable }}</td>
<th style="width: 10%">是否隐藏号码</th>
<td colspan="5" style="width: 45%">
{
{ formData.doYouHideNumbers }}
</td>
</tr>
<tr>
<th>国家地区</th>
<td>{
{ formData.nationalArea }}</td>
<th>护照号</th>
<td colspan="5">{
{ formData.passportNo }}</td>
</tr>
<tr>
<th>身份证号</th>
<td>{
{ formData.idNumber }}</td>
<th>身份证照片</th>
<td colspan="5">{
{ formData.iDCardPhoto }}</td>
</tr>
<tr>
<th>籍贯</th>
<td>{
{ formData.nativePlace }}</td>
<th>民族</th>
<td colspan="5">{
{ formData.nation }}</td>
</tr>
<tr>
<th>英文名</th>
<td>{
{ formData.englishName }}</td>
<th>婚姻状况</th>
<td colspan="5">{
{ formData.maritalStatus }}</td>
</tr>
<tr>
<th>员工照片</th>
<td>{
{ formData.staffPhoto }}</td>
<th>生日</th>
<td colspan="5">{
{ formData.birthday }}</td>
</tr>
<tr>
<th>属相</th>
<td>{
{ formData.zodiac }}</td>
<th>年龄</th>
<td colspan="5">{
{ formData.age }}</td>
</tr>
<tr>
<th>星座</th>
<td>{
{ formData.constellation }}</td>
<th>血型</th>
<td colspan="5">{
{ formData.bloodType }}</td>
</tr>
<tr>
<th>户籍所在地</th>
<td>{
{ formData.domicile }}</td>
<th>政治面貌</th>
<td colspan="5">{
{ formData.politicalOutlook }}</td>
</tr>
<tr>
<th>入党时间</th>
<td>{
{ formData.timeToJoinTheParty }}</td>
<th>存档机构</th>
<td colspan="5">{
{ formData.archivingOrganization }}</td>
</tr>
<tr>
<th>子女状态</th>
<td>{
{ formData.stateOfChildren }}</td>
<th>子女有无商业保险</th>
<td colspan="5">
{
{ formData.doChildrenHaveCommercialInsurance }}
</td>
</tr>
<tr>
<th>有无违法违纪行为</th>
<td>{
{ formData.isThereAnyViolationOfLawOrDiscipline }}</td>
<th>有无重大病史</th>
<td colspan="5">
{
{ formData.areThereAnyMajorMedicalHistories }}
</td>
</tr>
<tr class="title">
<td colspan="8" class="centInfo">通讯信息</td>
</tr>
<tr>
<th>QQ</th>
<td>{
{ formData.qQ }}</td>
<th>微信</th>
<td colspan="5">{
{ formData.weChat }}</td>
</tr>
<tr>
<th>居住证城市</th>
<td>{
{ formData.residenceCardCity }}</td>
<th>居住证办理日期</th>
<td colspan="5">{
{ formData.dateOfResidencePermit }}</td>
</tr>
<tr>
<th>居住证截止日期</th>
<td>{
{ formData.residencePermitDeadline }}</td>
<th>现居住地</th>
<td colspan="5">{
{ formData.placeOfResidence }}</td>
</tr>
<tr>
<th>通讯地址</th>
<td>{
{ formData.postalAddress }}</td>
<th>联系手机</th>
<td colspan="5">{
{ formData.contactTheMobilePhone }}</td>
</tr>
<tr>
<th>个人邮箱</th>
<td>{
{ formData.personalMailbox }}</td>
<th>紧急联系人</th>
<td colspan="5">{
{ formData.emergencyContact }}</td>
</tr>
<tr>
<th>紧急联系电话</th>
<td colspan="7">{
{ formData.emergencyContactNumber }}</td>
</tr>
<tr class="title">
<td colspan="8" class="centInfo">账号信息</td>
</tr>
<tr>
<th>社保电脑号</th>
<td>{
{ formData.socialSecurityComputerNumber }}</td>
<th>公积金账号</th>
<td colspan="5">{
{ formData.providentFundAccount }}</td>
</tr>
<tr>
<th>银行卡号</th>
<td>{
{ formData.bankCardNumber }}</td>
<th>开户行</th>
<td colspan="5">{
{ formData.openingBank }}</td>
</tr>
<tr class="title">
<td colspan="8" class="centInfo">教育信息</td>
</tr>
<tr>
<th>学历类型</th>
<td>{
{ formData.educationalType }}</td>
<th>毕业学校</th>
<td colspan="5">{
{ formData.graduateSchool }}</td>
</tr>
<tr>
<th>入学时间</th>
<td>{
{ formData.enrolmentTime }}</td>
<th>毕业时间</th>
<td colspan="5">{
{ formData.graduationTime }}</td>
</tr>
<tr>
<th>专业</th>
<td>{
{ formData.major }}</td>
<th>毕业证书</th>
<td colspan="5">{
{ formData.graduationCertificate }}</td>
</tr>
<tr>
<th>学位证书</th>
<td colspan="7">{
{ formData.certificateOfAcademicDegree }}</td>
</tr>
<tr class="title">
<td colspan="8" class="centInfo">从业信息</td>
</tr>
<tr>
<th>上家公司</th>
<td>{
{ formData.homeCompany }}</td>
<th>职称</th>
<td colspan="5">{
{ formData.title }}</td>
</tr>
<tr>
<th>简历</th>
<td>{
{ formData.resume }}</td>
<th>有无竞业限制</th>
<td colspan="5">
{
{ formData.isThereAnyCompetitionRestriction }}
</td>
</tr>
<tr>
<th>前公司离职证明</th>
<td>{
{ formData.proofOfDepartureOfFormerCompany }}</td>
<th>备注</th>
<td colspan="5">{
{ formData.remarks }}</td>
</tr>
</table>
<div class="foot">签字：___________日期:___________</div>
</div>
</el-card>
</div>
</div>
</template>
<script>
import { FindStaffPersonalInfo } from '@/api/staff'
// 导入打印的组件
import print from 'vue-print-nb'
export default {
name: 'PrinterVue',
// 注册自定义指令
directives: {
print,
},
data() {
return {
formData: {},
userId: this.$route.params.id,
}
},
// 创建完毕状态
created() {
this.onFindStaffPersonalInfo()
},
// 组件更新
methods: {
async onFindStaffPersonalInfo() {
const { data } = await FindStaffPersonalInfo(this.userId) // 获取个人基本信息
this.formData = data
},
onPrimary() {
console.log(1)
},
},
}
</script>
<style lang="scss" scoped>
.foot {
padding: 30px 0;
text-align: right;
}
.primaryBtn {
text-align: right;
margin-bottom: 8px;
margin-right: 9px;
}
</style>
注的地方详细看一下如何用即可