html2pdf.js: "html2pdf__page-break" gives unexpected vertical left aligned line

@eKoopmans not sure if this is an issue (yours or jsPDF) or designed feature.

My HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <script src="lib/html2canvas.min.js"></script>
    <script src="lib/html2pdf.js"></script>
</head>
<body>
     <div id="element-to-print">
        <span>I'm on page 1!</span>
        <div class="html2pdf__page-break"></div>
        <span>I'm on page 2!</span>
    </div>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

So having this

<span>I'm on page 1!</span>
<div class="html2pdf__page-break"></div>
<span>I'm on page 2!</span>

WITH NO custom CSS code gives me a hint I would expect just text on 2 pages.

My JS:

var element = document.getElementById('element-to-print');
const options = {
    margin: 10,
    filename: pdfFileName,
    image: {
        type: 'jpeg',
        quality: 0.98
    },
    html2canvas: {
        dpi: 192,
        letterRendering: true
    },
    jsPDF: {
        orientation: 'portrait'
    }
}

html2pdf(element, options);

Soch code gives me PDF, and I see some vertical line in content. This is how Chrome PDF viewer shows: screen shot 2017-05-03 at 20 43 05

And this is how Adobe Reader on MacOS shows: screen shot 2017-05-03 at 20 43 22

Left aligned from the text, and among whole pages I see vertical line, presumably left-broder, etc.

@eKoopmans will u agree with me, that my expectation TO NOT have that line does at least some sense?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (9 by maintainers)

Most upvoted comments

No problem @lidijarad! I’m glad everything’s working well, let me know if you run into any other problems.

eKoopmans on May 14, 2017

You’re going to say this isn’t obvious - and you’d probably be right - but again as mentioned in the readme, the order of the dependencies is important.

jsPDF includes an out-of-date version of html2canvas internally, so you need to include html2canvas after jsPDF and before html2pdf. I’ve updated the order of the includes in your fiddle (the only change I made is including html2canvas before html2pdf instead of after).

Maybe it would be best to package all of the dependencies together with Browserify and offer a html2pdf.bundle.js to avoid all of these sorts of issues. In any case, please try the link I sent and let me know if it’s still producing the black bars or boxes (neither show up for me).

eKoopmans on May 14, 2017