不太常用，但万一用到一定要会的vue打印功能

打印功能的实现离不开 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%"><imgstyle="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>

注的地方详细看一下如何用即可

不太常用，但万一用到一定要会的vue打印功能相关推荐

bim常用土建软件进行CAD识别，【门窗转化】功能
bim常用土建软件进行CAD识别,[门窗转化]功能.通常bim软件建模过程中,墙建立之后就会在其中插入门窗,以revit为例,如果我们用传统的做法,我们要选择门窗族,设置参数,设置尺寸等等.如果以上每 ...
css超过两行显示为..._使用这些不太常用的CSS属性，布局效率上又提高了一个层次...
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们.其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间. 作为前端 ...
几个不太常用，需要记录一下的Excel经验
日期转文本并指定格式 =TEXT(A1,"YYYY年MM月dd日") 图片链接地址转图片 (只适用于Excel,不适用于WPS表格) =<table><img s ...
iOS开发常用代码片段：总有你用得上的功能
使用方法:查看文章目录,查找需要的功能. 代码片段目录 1.禁止手机睡眠 2. 隐藏某行cell 3.禁用button高亮 4..切换window的根控制器 5.去除数组中重复的对象 6.给一个vie ...
太赞了！Python 开发神器Jupyter竟然还有可视化debug功能！
(点击上方快速关注并设置为星标,一起学Python) 来源丨数据STUDIO Python 代码编辑器怎么选?PyCharm.VS Code.Jupyter Notebook 都各有特色,Jupyte ...
太赞了！用 JS 实现了识别网页验证码的功能！
点击上方蓝字关注前端瓶子君,从此前端进阶不再难文章转载自:LeoNaN,文末有原文链接. 很高兴大家喜欢!Github:leonof/imgRecJs[1],刚刚上传,代码还需要完善-因为有不少同学 ...
注册窗口类 registerclass
window把窗口以不同的类别进行设计,通过不同的类别来管理不同的资源,体现模块化管理的思想.以mfc为例Button类别有ccheckbox,cbutton,radiobutton等 ,Static ...
关于RegisterClass的注册位置
昨天在smth,有人问起RegisterClass函数到底将窗口类注册到哪里了,想了一下,应该是一个系统级的存储空间里,但是却没有一个明确的说法,msdn上看了半天,基本上没有提到具体注册的位置.倒是 ...
个人碰到的前端问题总结及解决方法2
个人碰到的前端问题总结及解决方法2 文章目录个人碰到的前端问题总结及解决方法2 1.ElementUI如何禁用按钮的同时给出提示? 2.vue如何动态给定class和style? 3.vue+ele ...

不太常用，但万一用到一定要会的vue打印功能

不太常用，但万一用到一定要会的vue打印功能相关推荐

最新文章

热门文章