html2canvas + jspdf 实现html导出pdf并加水印,导出pdf文件过后添加超链接
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;
// 添加超链接(一定要加setPage(1),否则每一页的指定坐标位置(25,95)都会加上这个链接,且当前使用的英文,中文会乱码,有解决方案没有尝试成功暂时放弃了)
pdf.setPage(1).textWithLink('Contact TA', 25, 95, {url: globe.baseUrl + 'web/?page=resumeDetail&id=' + _this.resumeInfo.id});
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代码片段截图
导出pdf加超链接中文乱码解决方案:https://blog.csdn.net/lingliu0824/article/details/113872067
注意:插件的版本至关重要,网上版本太多,不是导出来变形就是其他乱七八糟的,这个将就能用。。。。需要插件的留下邮箱我看到给你们发哦!!!
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/16336554.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库