上节课我们用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);
    });
}