Question

我需要将面板内容添加到PDF（标题面板）的每个页面中。我正在使用新的html（）方法来执行此操作。我正在尝试使用setPage（）函数设置当前页面，但输出PDF的第一页中的所有标题面板均带有xOffset和yOffset 0，因此彼此重叠。

jsPDF v1.5.3，请参阅小提琴：https://jsfiddle.net/nzgr2a7y/3/

pdf.html(
            $('#tableToPrint')[0], 
            {
                callback: function (output) {
                                                    if (count == 0) {
                            $('#tblDynamicPadding').remove();
                            pdf.text(20, 40, 'RP');
                        } else
                            pdf.addPage();

                     pdf.setPage(count+1);
                            pdf.text('Page ' + (count + 1), 20, 300);


                         if (count < 1) {
                                            count++;
                                            addNewPage(pdf);
                                        } else
                                            pdf.save();
                }
            }
        );

标题面板（选择标准）出现两次，但在页面1中。它应该在每个页面中出现一次。还可以像在选项中一样将xOffset和yOffset设置为html（）吗？这些选项未在函数定义中定义这些属性。

与fromHTML（）一样，不推荐使用addHTML（）和html2pdf（），它使用html（）可以很好地与CSS配合使用，除了此问题之外，其他所有功能都可以使用。任何帮助将不胜感激。谢谢。问候

Answer 1

有趣的方法！但是，如果我理解正确，.html()总是从第一页开始。 setPage()的结果表明，pdf.text()没有任何问题。在第1页上获得2个“标题面板”的原因是因为您添加了padding-top，否则它将覆盖在第一个顶部。如果将padding-top更改为页面高度，则会在第2页上获得第二个“标题面板”。

对于xOffset和yOffset，理论上您可以根据html2canvas options使用source code of .html()对其进行修改。它对我来说只有一个表，但是由于您添加了padding-top，因此您需要根据情况选择相应的值。

$('#tableToPrint').prepend('<table id="tblDynamicPadding" style="padding-top:' + height + 'px;visibility:hidden;"><tr><td><span></span></td></tr></table>');


function addNewPage(pdf) {
    pdf.html($('#tableToPrint')[0], {
            html2canvas: {
                x: 10, // xOffset
                y: 10 // yOffset
            },
            callback: function (output) {
                if (count == 0) {
                    $('#tblDynamicPadding').remove();
                    pdf.text(20, 40, 'RP');
                } else {
                    pdf.addPage();
                    pdf.setPage(count + 1);
                }

                pdf.text('Page ' + (count + 1), 20, 300);

                if (count < 1) {
                    count++;
                    addNewPage(pdf);
                } else
                    // pdf.save();
                    window.open(pdf.output('bloburl')); // use this to debug
            }
        }
    );
}

Answer 2

上一个答案已经足够长了，这个答案与它完全不同，所以我在这里添加一个新答案。我有一个项目，需要使用pdf在每页上带有页眉/徽标的方式发送传真。我修改了此answer并使其与html()一起使用，基本上只是在addLogo(pdf)内部调用callback函数。您可以修改该函数以添加标题。希望这一点对您有所帮助，尽管为时已晚。

<script src="~/lib/jspdf/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    function sendFax() {
        const scale = window.innerWidth / window.outerWidth;
        if (scale != 1) {
            document.body.style.zoom = scale;
        }

        let pdf = new jsPDF('p', 'pt', [612, 792]); // letter

        pdf.setProperties({
            title: "Fax"
        });

        pdf.html(document.getElementById('fax'), {
            html2canvas: {
                scale: 1 // default is window.devicePixelRatio
            },
            callback: function () {
                pdf = addLogo(pdf); // use this to add your header
                window.open(pdf.output('bloburl'));
            }
        });
    }

    function addLogo(doc) {
        const totalPages = doc.internal.getNumberOfPages();
        let img = new Image();
        img.src = "/images/logo-sm.png";

        for (var i = 1; i <= totalPages; i++) {
            doc.setPage(i);
            doc.addImage(img, 'PNG', 40, 40, 75, 75);
        }

        return doc;
    }
</script>

jsPDF setPage（）在html（）情况下不起作用，始终将HTML源代码渲染到具有xOffset和yOffset 0的首页中

2 个答案: