上节课我们用Swagger测试Web方法，可以查询到某个请假记录，那么这节课咱们把请假详情填写在请假单上。
一、熟悉前端页面
请假单是leave_pdf.vue弹窗页面，我们先来看看页面的模型层部分。
data: function() {
return {
visible: false,
htmlTitle: '员工请假单',
name: null,
sex: null,
dept: null,
reason: null,
start: null,
end: null,
type: null
};
},
页面视图层的排版不不复杂，主题部分还是以表格为主。
<el-dialog width="780px" :close-on-click-modal="false" v-model="visible" :show-close="false">
<div id="pdfDom">
<h2 class="title">员工请假单</h2>
<table class="leave-table">
<tr align="center">
<td width="14%">姓名</td>
<td width="16%">{{ name }}</td>
<td width="14%">性别</td>
<td width="16%">{{ sex }}</td>
<td width="14%">部门</td>
<td>{{ dept }}</td>
</tr>
<tr>
<td align="center">请假类别</td>
<td colspan="5">{{ type }}</td>
</tr>
<tr>
<td align="center">请假时间</td>
<td colspan="5">{{ start }} ~ {{ end }}</td>
</tr>
<tr>
<td align="center">请假事由</td>
<td colspan="5">{{ reason }}</td>
</tr>
<tr>
<td align="center">此处签字</td>
<td colspan="2"></td>
<td align="center">人事盖章</td>
<td colspan="3"></td>
</tr>
</table>
<p class="desc">备注：员工请假期间一切责任自负，假期结束后应及时返回工作岗位，否则按照旷工处理。</p>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="getPdf()" size="medium">下载请假单</el-button>
<el-button size="medium" @click="cancel()">取消</el-button>
</span>
</template>
</el-dialog>
二、加载请假数据
在leave_pdf.vue页面，我们要编写init()函数，发起Ajax请求查询请假数据，然后显示在弹窗上面。
init: function(id) {
let that = this;
that.visible = true;
that.name = null;
that.sex = null;
that.dept = null;
that.reason = null;
that.start = null;
that.end = null;
that.type = null;
that.$http('leave/searchLeaveById', 'POST', {id: id}, true, function(resp) {
that.name = resp.name;
that.sex = resp.sex;
that.dept = resp.dept;
that.reason = resp.reason;
if (resp.type == 1) {
that.type = '病假';
} else if (resp.type == 2) {
that.type = '事假';
}
that.start = resp.start;
that.end = resp.end;
});
},
三、生成PDF文件
在main.js文件中，我封装了把网页某块内容生成PDF文件的公共函数。
//配置JS生成PDF的公共函数
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
app.config.globalProperties.getPdf = function() {
var title = this.htmlTitle //PDF文件名字
//将某个页面内的id为pdfDom的控件内容生成PDF文件
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true,
taintTest: false,
useCORS: true,
//width:960,
//height:5072,
dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
scale: 4 //按比例增加分辨率
}).then(function(canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
})
}
我们把leave_pdf.vue页面中取消按钮点击事件给实现一下。
<el-button type="primary" @click="getPdf('#pdfDom')" size="medium">下载请假单</el-button>
<el-button size="medium" @click="cancel()">取消</el-button>
cancel: function() {
this.visible = false
}
四、显示弹窗页面
在leave.vue页面已经引用了leave_pdf.vue弹窗页面，所以我们只需要编写JS代码，把弹窗显示出来。
<el-button
type="text"
size="medium"
v-if="scope.row.status == '已同意'"
@click="pdfHandle(scope.row.id)"
>
请假单
</el-button>
pdfHandle: function(id) {
this.pdfVisible = true;
this.$nextTick(() => {
this.$refs.pdf.init(id);
});
}