html2canvas + jspdf 实现html导出pdf并加水印_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: 特征函数，自然映射下一篇:mysql1-5

html2canvas + jspdf 实现html导出pdf并加水印

发布时间：2022-06-08 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了html2canvas + jspdf 实现html导出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;
                                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'));
        },