近期项目上用到了PDF生成，网上找了找全是通过html2canvas去生成，但是大部分文档都不支持长网页，折腾了几天，终于找到了解决办法，话不多说，直接上代码！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>面试评分</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
<link rel="shortcut icon"
href="https://pic.stackoverflow.wiki/uploadImages/202/189/2/194/2020/04/29/14/51/f11c0ff2-bc90-4d6e-8a26-e76d3c9e69ac.ico"
type="image/x-icon">
<style>
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius: 5px;
}
.el-table-filter {
max-height: 300px;
overflow: auto;
}
.el-dialog__header {
padding: 5px 20px 1px;
}
table.gridtable {
font-family: verdana, arial, sans-serif;
font-size: 0.6rem;
color: #333333;
border-width: 1px;
border-color: #CCCCCC;
border-collapse: collapse;
width: 100%;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
background-color: #66CCCC;
}
table.gridtable td {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #CCCCCC;
background-color: #ffffff;
}
td {
text-align: center;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<el-row :gutter="10" style="margin-top: 2rem;">
<el-col :span="2"> </el-col>
<el-col :span="20">
<el-card class="box-card">
<template>
<el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%" id="woca">
<el-table-column type="index" width="50">
</el-table-column>
<el-table-column label="姓名" prop="name" min-width="100">
</el-table-column>
<el-table-column label="应聘职位" prop="yingPinZhiWei" min-width="180">
</el-table-column>
<el-table-column label="面试日期" prop="date" min-width="170">
</el-table-column>
<el-table-column label="联系电话" prop="lianXiDianHua" min-width="150">
</el-table-column>
<el-table-column label="求职类型" prop="qiuZhiLeiXing">
</el-table-column>
<el-table-column label="性别" prop="xingBie">
</el-table-column>
<el-table-column align="right" min-width="200">
<template slot="header" slot-scope="scope">
<el-input v-model="search" size="mini" placeholder="输入姓名搜索" clearable />
</template>
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="handleEdit(scope.$index, scope.row)">操 作</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-card>
</el-col>
</el-row>
<el-dialog :title='dialogTitle' :visible.sync="dialogFormVisible" align="center" width='55rem' id="dialogx"
:modal='false' style="margin-top: -14vh;">
<el-card class="box-card" id="pdfcontent" width='55rem'>
<template>
<el-row style="margin-bottom: 0.7rem; text-align: left; padding-left: 0.5rem; margin-top: 1rem;">
<el-col :span="1">姓名:</el-col>
<el-col :span="3">仇仇趣生活Vlog</el-col>
<el-col :span="1">岗位:</el-col>
<el-col :span="4">开发工程师</el-col>
<el-col :span="1">部门:</el-col>
<el-col :span="3">研发部</el-col>
</el-row>
<table class="gridtable">
<tbody>
<tr>
<th rowspan="2" style="width: 5%;">评分项目</th>
<th rowspan="2" style="width: 4%;">权重</th>
<th colspan="2">评分标准</th>
<th rowspan="2" style="width: 6%;">得分</th>
</tr>
<tr>
<th style="width: 15%;">评分内容</th>
<th style="width: 4%;">计算标准</th>
</tr>
<tr>
<td rowspan="5" style="font-weight: bolder;">一、学历</td>
<td rowspan="5">25%</td>
<td>博士研究生</td>
<td>100</td>
<td rowspan="5">
<el-input v-model="input" size='mini' type="number"></el-input>
</td>
</tr>
<tr>
<td>硕士研究生</td>
<td>80</td>
</tr>
<tr>
<td>国内外重点院校本科</td>
<td>60</td>
</tr>
<tr>
<td>其他院校本科</td>
<td>40</td>
</tr>
<tr>
<td>大专及以下</td>
<td>20</td>
</tr>
<tr>
<td rowspan="8" style="font-weight: bolder;">二、职业资格</td>
<td rowspan="8">10%</td>
<td style="text-align: left;">注册会计师CPA、金融风险管理师FRM、特许理财规划师CFP</td>
<td>50</td>
<td>
<el-input v-model="input" size='mini' type="number"></el-input>
</td>
</tr>
<tr>
<td>国际注册会计师ACCA</td>
<td>40</td>
<td>
<el-input v-model="input" size='mini' type="number"></el-input>
</td>
</tr>
<tr>
<td>国际注册内部审计师CIA</td>
<td>40</td>
<td>
<el-input v-model="input" size='mini' type="number"></el-input>
</td>
</tr>
<tr>
<td>法律职业资格</td>
<td>30</td>
<td>
<el-input v-model="input" size='mini' type="number"></el-input>
</td>
</tr>
<tr>
<td style="text-align: left;">其他专业资格/高级职称：经济师、会计师、人力资源管理师、信息系统项目管理师、网络规划设计师、系统架构设计师、系统规划与管理师、系统分析师</td>
<td>20</td>
<td>
<el-input v-model="input" size='mini' type="number"></el-input>
</td>
</tr>
<tr>
<td style="text-align: left;">其他专业资格/中级职称：经济师、会计师、人力资源管理师等</td>
<td>10</td>
<td>
<el-input v-model="input" size='mini' type="number"></el-input>
</td>
</tr>
<tr>
<td style="text-align: left;">其他专业资格/初级职称：经济师、会计师、人力资源管理师等</td>
<td>5</td>
<td rowspan="2">
<el-input v-model="input" size='mini' type="number"></el-input>
</td>
</tr>
<tr>
<td>无专业资格</td>
<td>0</td>
</tr>
<tr>
<td rowspan="7" style="font-weight: bolder;">三、工作年限</td>
<td rowspan="7">20%</td>
<td>10年或以上</td>
<td>100</td>
<td rowspan="7">
<el-input v-model="input" size='mini' type="number"></el-input>
</td>
</tr>
<tr>
<td>8年或以上</td>
<td>80</td>
</tr>
<tr>
<td>6年或以上</td>
<td>60</td>
</tr>
<tr>
<td>4年或以上</td>
<td>40</td>
</tr>
<tr>
<td>2年或以上</td>
<td>20</td>
</tr>
<tr>
<td>1年或以上</td>
<td>10</td>
</tr>
<tr>
<td>1年以下</td>
<td>0</td>
</tr>
<!-- <tr>
<td colspan="2" style="text-align: left;">*其中各行业工作年限计算方法：</td>
<td rowspan="4"></td>
</tr>
<tr>
<td colspan="2" style="text-align: left;">1、技术类互联网企业，从业年限*100%；</td>
</tr>
<tr>
<td colspan="2" style="text-align: left;">2、500强企业，从业年限*85%；</td>
</tr>
<tr>
<td colspan="2" style="text-align: left;">3、其他行业，从业年限*70%。</td>
</tr>
<tr> -->
<td rowspan="3" style="font-weight: bolder;">四、拟任岗位</td>
<td rowspan="3">15%</td>
<td>一级部门负责人</td>
<td>100</td>
<td rowspan="3">
<el-input v-model="input" size='mini' type="number"></el-input>
</td>
</tr>
<tr>
<td>一级部门副总或其他子公司负责人</td>
<td>80</td>
</tr>
<tr>
<td>拟任其他岗位</td>
<td>50</td>
</tr>
<tr>
<td style="font-weight: bolder;">五、面试意见</td>
<td>30%</td>
<td colspan="2" style="text-align: left;">部门负责人根据入职人员综合能力、过往业绩等，参考各职级、职等区间分数值拟定意见，并附定级理由</td>
<td>
<el-input v-model="input" size='mini' type="textarea" :rows="2"></el-input>
</td>
</tr>
<tr>
<td style="font-weight: bolder;">六、综合修正评分</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4" style="text-align: left; font-weight: bold; padding-left: 1rem;">总得分</td>
<td></td>
</tr>
</tbody>
</table>
<el-row style="margin-top: 1rem; text-align: left; padding-left: 0.5rem;">
<el-col :span="2">员工签字:</el-col>
<el-col :span="3"> </el-col>
<el-col :span="4">部门负责人签字:</el-col>
<el-col :span="3"> </el-col>
<el-col :span="3">复核人签字:</el-col>
<el-col :span="3"> </el-col>
<el-col :span="2">日期:</el-col>
</el-row>
</template>
</el-card>
<div slot="footer" class="dialog-footer" data-html2canvas-ignore="true">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="createpdf()">生成PDF</el-button>
</div>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script type="text/javascript" src="https://unpkg.zhimg.com/vue@2.6.11/dist/vue.js"></script>
<!-- import JavaScript -->
<script type="text/javascript" src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
tableData: [{
date: '2016-05-02 09:18:00',
name: '张三1',
address: '上海市普陀区金沙江路 1518 弄',
yingPinZhiWei: 'Java开发工程师',
qiuZhiLeiXing: '全职',
xingBie: '男',
lianXiDianHua: '13691530444'
}, {
date: '2016-05-02 09:18:00',
name: '张三2',
address: '上海市普陀区金沙江路 1518 弄',
yingPinZhiWei: 'Java开发工程师',
qiuZhiLeiXing: '全职',
xingBie: '男',
lianXiDianHua: '13691530444'
}, {
date: '2016-05-99 09:18:00',
name: '张三3',
address: '上海市普陀区金沙江路 1518 弄',
yingPinZhiWei: 'Java开发工程师',
qiuZhiLeiXing: '全职',
xingBie: '男',
lianXiDianHua: '13691530444'
}],
search: '',
dialogFormVisible: false,
dialogTitle: '仇仇趣生活Vlog职级评分表',
input: '',
}
},
mounted: function () { },
methods: {
handleEdit(index, row) {
console.log(index, row);
this.dialogFormVisible = true;
this.dialogTitle = '[' + row.name + '] 职级评分表';
},
createpdf() {
this.screenShot($('#pdfcontent'),this.dialogTitle);
},
screenShot(targetDom,title) {
var copyDom = targetDom.clone();//克隆dom节点
copyDom.css('display', 'block');
$('#pdfcontent').append(copyDom);//把copy的截图对象追加到body后面
var width = copyDom.width();//dom宽
console.log(width);
var height = copyDom.height();//dom高
var scale = 3;//放大倍数
var canvas = document.createElement('canvas');
canvas.width = width * scale;//canvas宽度
canvas.height = height * scale;//canvas高度
var content = canvas.getContext("2d");
content.scale(scale, scale);
var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
content.translate(-rect.left, -rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
html2canvas(copyDom, {
allowTaint: true,
tainTest: true,
scale: scale,
canvas: canvas,
width: width,
background: '#FFFFFF',
heigth: height,
onrendered: function (canvas) {
copyDom.css('display', 'none');
// document.body.appendChild(canvas)
var pdf = new jsPDF('', 'pt', 'a4');
//addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
pdf.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
pdf.save(title + '.pdf');
}
});
},
}
})
</script>
</html>
