jsPDF 水印图像在文本上

问题描述 投票:0回答:0

我正在使用 jsPDF 插件,但我遇到了一个问题,我可以有不同数量的页面和不同的内容,并且我放了两个水印。问题是有时文本会推断页面大小并且图像会与文本重叠,除了在移动到下一页时文本会中断。

enter image description here

页脚标志下方有文字,页眉标志应占满页面的整个宽度

function downloadPdf(tipo) {
        window.jsPDF = window.jspdf.jsPDF;
        var doc = new jsPDF();
        var evento_id = $("#evento_id").val();
        var elementHTML = document.querySelector("#visaoPdf");        
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });        
        $.ajax({
                'url' : '{{ route("route") }}',
                'type' : 'POST',
                'data' : {evento_id : evento_id, tipo: tipo},
                'success' : function(data) {     
                    var dados = data;
                    doc.html(dados, {
                        callback: function(doc) {
                            doc.p
                            doc.addFileToVFS('Montserrat-Medium-normal.ttf');
                            doc.addFont('Montserrat-Medium-normal.ttf', 'Montserrat-Medium-normal', 'normal');
                            doc.setFont('Montserrat-Medium-normal', 'normal');     
                            doc.setFontSize(28);
                            doc = addWaterMark(doc, tipo);
                            doc.save(tipo + evento_id +'.pdf');
                        },
                        x: 15,
                        y: 20,
                        width: 170,
                        height: 250,
                        windowWidth: 750
                    });
                }
        });


function addWaterMark(doc, tipo) {
        var totalPages = doc.internal.getNumberOfPages();
        var img2 = new Image();
        var img1 = new Image();
        img1.src = '/img/logo-pdf.png';
        img2.src = '/img/rodape-pdf.png';
        for (i = 1; i <= totalPages; i++) {
            doc.setPage(i);
            doc.addImage(img1, 'PNG', doc.internal.pageSize.width - 50, 5, 45, 14);
            if(tipo != 'visaogeral'){
                doc.addImage(img2, 'PNG', 8, doc.internal.pageSize.height - 30, 200, 25);
            }            
            // doc.setTextColor(150);
            // doc.text(50, doc.internal.pageSize.height - 30, 'Watermark');
        }

        return doc;
    }

我想知道是否可以在图像上放置一个内边距,或者将其占据页面的整个宽度,并将其作为非浮动元素放置。

jquery jspdf
© www.soinside.com 2019 - 2024. All rights reserved.