近期项目上用到了PDF生成,网上找了找全是通过html2canvas去生成,但是大部分文档都不支持长网页,折腾了几天,终于找到了解决办法,话不多说,直接上代码!
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">
::-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;
}
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%" id="woca">
:modal='false' style="margin-top: -14vh;">
评分项目
权重
评分标准
得分
评分内容
计算标准
一、学历
25%
博士研究生
100
硕士研究生
80
国内外重点院校本科
60
其他院校本科
40
大专及以下
20
二、职业资格
10%
注册会计师CPA、金融风险管理师FRM、特许理财规划师CFP
50
国际注册会计师ACCA
40
国际注册内部审计师CIA
40
法律职业资格
30
其他专业资格/高级职称:经济师、会计师、人力资源管理师、信息系统项目管理师、网络规划设计师、系统架构设计师、系统规划与管理师、系统分析师
20
其他专业资格/中级职称:经济师、会计师、人力资源管理师等
10
其他专业资格/初级职称:经济师、会计师、人力资源管理师等
5
无专业资格
0
三、工作年限
20%
10年或以上
100
8年或以上
80
6年或以上
60
4年或以上
40
2年或以上
20
1年或以上
10
1年以下
0
四、拟任岗位
15%
一级部门负责人
100
一级部门副总或其他子公司负责人
80
拟任其他岗位
50
五、面试意见
30%
部门负责人根据入职人员综合能力、过往业绩等,参考各职级、职等区间分数值拟定意见,并附定级理由
六、综合修正评分
总得分
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');
}
});
},
}
})