1、插件:
1)html2canvas.min.js
2)jspdf.debug.js
2、核心代码
downLoadResume() {
let _this = this;
layer.confirm("确认下载pdf吗?", {
btn: ['确认', '取消']
}, function (index) {
layer.close(index);
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
$(".detail-collection").hide();
_this.TpWatermark('真工作', '100', '300', '-30', 'grey', '32', '0.1');
html2canvas($("#resumeDetail"), {
allowTaint: true,
useCORS: true,
background: '#FFFFFF',
height: $("#resumeDetail").innerHeight(),
scale: 2,
onrendered: 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');
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
if (leftHeight < pageHeight) {
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save(_this.resumeInfo.name + '-简历.pdf');
setTimeout(function () {
_this.RemoveTpWatermark(); // 加水印
$(".detail-collection").show();
}, 3000);
}
})
}, function () {
layer.msg('取消下载', {time: 2000});
_this.RemoveTpWatermark();
$(".detail-collection").show();
});
}
3、加水印
// 添加水印方法
// CON:水印文字内容;H:水印行高;W:水印宽度;R:旋转度数(可为负值);C:水印字体颜色;S:水印字体的大小; O:水印透明度(0~1之间取值)
TpWatermark(CON, H, W, R, C, S, O) {
// 判断水印是否存在,如果存在,那么不执行
if (document.getElementById('tp-watermark') != null) {
return
}
let TpLine = parseInt(document.getElementById("resumeDetail").clientWidth / W) * 2; // 一行显示几列
let StrLine = '';
for (let i = 0; i < TpLine; i++) {
StrLine += '<span style="display: inline-block; line-height:' + H + 'px; width:' + W + 'px; text-align: center; transform:rotate(' + R + 'deg); color:' + C + '; font-size:' + S + 'px; opacity:' + O + ';">' + CON + '</span>'
}
let DivLine = document.createElement("div");
DivLine.innerHTML = StrLine;
let TpColumn = parseInt(document.getElementById("resumeDetail").clientHeight / H) + 30; // 一列显示几行(这里的高度关乎导出pdf后水印显示的是否齐全,视具体情况而定 )
let StrColumn = '';
for (let i = 0; i < TpColumn; i++) {
StrColumn += '<div style="white-space: nowrap;">' + DivLine.innerHTML + '</div>';
}
let DivLayer = document.createElement("div");
DivLayer.innerHTML = StrColumn;
DivLayer.id = "tp-watermark"; // 给水印盒子添加类名
DivLayer.style.position = "fixed";
DivLayer.style.top = "10px"; // 整体水印距离顶部距离
DivLayer.style.left = "-100px"; // 改变整体水印的left值
DivLayer.style.zIndex = "99999"; // 水印页面层级
DivLayer.style.pointerEvents = "none";
document.getElementById("resumeDetail").appendChild(DivLayer); // 到页面中
},
// 移除水印方法
RemoveTpWatermark() {
// 判断水印是否存在,如果存在,那么执行
if (document.getElementById('tp-watermark') == null) {
return
}
document.getElementById("resumeDetail").removeChild(document.getElementById('tp-watermark'));
},
html代码片段截图
注意:插件的版本至关重要,网上版本太多,不是导出来变形就是其他乱七八糟的,这个将就能用。。。。需要插件的留下邮箱我看到给你们发哦!!!