"html2pdf__page-break" gives unexpected vertical left aligned line #2

alundiak · 2017-05-03T18:49:37Z

@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:

And this is how Adobe Reader on MacOS shows:

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?

The text was updated successfully, but these errors were encountered:

eKoopmans · 2017-05-03T19:01:37Z

Yep, that looks like a problem! I'll look into it.

lidijarad · 2017-05-12T13:29:37Z

Hi @eKoopmans thank you for your library, I found a similar error, and this happened if I changed the margin != 1. If margin is set to 1, then the output is ok. I just checked and this seems to happen if I change any of the values that you provide in your example in the README.

eKoopmans · 2017-05-12T17:34:12Z

Hi @alundiak @lidijarad, I'd definitely like to resolve this issue but I haven't yet been able to reproduce it. It could be a platform thing. Could you please:

Create a fork of this jsFiddle that illustrates the issue (the dependencies are already included in the fiddle), and
Tell me what browser, OS, and PDF viewer you're using?

Thanks!

alundiak · 2017-05-12T19:26:29Z

@eKoopmans
This jsFiddle example uses your repo js files via raw access. And result file.pdf is with vertical lines and black region.

html2canvas 0.5.0-beta4
jspdf/1.3.4/jspdf.debug.js

I also tried with https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.jswhich is in fact beta-3 - result the same.

file (1).pdf

eKoopmans · 2017-05-12T19:54:03Z

Hi, as I mentioned in the readme, html2pdf works best with the custom builds of html2canvas and jsPDF included in the /vendor/ directory. Specifically here, the black bars are caused by an html2canvas issue with offscreen rendering, which is resolved in the custom build in /vendor/.

The jsFiddle I linked uses the /vendor/ files for both dependencies. Here's a fiddle with your code in it, the result for me doesn't produce any black bars.

alundiak · 2017-05-12T21:25:23Z

ok, then close this issue, if it's not an issue.

alundiak · 2017-05-12T21:34:17Z

I think it's bug, because as an end consumer, I want to use 3rd party libs and not depend on your own build of the lib code. Otherwise such lib is not well maintainable. When new version/release of html2canvas appear, u will update ur repo and I will have to update my code with file from your repo directly. I would like to install by npm or bower module/component and rely on it strictly from official releases.

eKoopmans · 2017-05-12T21:55:54Z

@alundiak I hear you, I'd rather be able to use the stock versions too, but right now that offscreen rendering issue is an unavoidable bug in html2canvas. There's no way I could fix it from the outside. I'm waiting on the pull request to be merged in over there, as soon as it is then there will be no need for custom builds!

Your initial issue, with the dark vertical strip to the left of the text, seems separate from the black boxes, and I'd still like to resolve it. Have you tested with the custom html2canvas?

alundiak · 2017-05-13T10:24:37Z

html2canvas issue with offscreen rendering, which is resolved in the custom build in /vendor/

If u did changes in minified file, then I would suggest u add comment on header of file, so that code researcher realize, that minified file IS NOT the same version as version published on CDN or elsewhere. Doing this, u will show, the reason why u have copy of file in code itself. U know - if I saw it in code, I would know why u have copy. Yes I read it in readme, and I realise the reason of copy in vendor. But hope u agree, that from code perspective, it's not informative, that 3rd-party library has been somehow changed.

eKoopmans · 2017-05-13T19:57:41Z

You're right @alundiak, I've added info about the custom builds to both vendor dependencies in 474b36e.

alundiak · 2017-05-13T21:39:46Z

@eKoopmans this is "html2pdf usage - NEW" jsfiddle.
It uses:

https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js
https://raw.githubusercontent.com/eKoopmans/html2pdf/master/vendor/html2canvas.min.js (with ur: "2017-05-13 Custom build by Erik Koopmans, featuring latest bugfixes and features")
also tried with this https://rawgit.com/eKoopmans/html2pdf/master/vendor/html2canvas.min.js
https://rawgit.com/eKoopmans/html2pdf/master/src/html2pdf.js

Results is the same:
file_May-13-2017_.pdf

MacOS 10.12.4, Chrome 58.0, Safari 10.1, Firefox 53.0.2

Adobe Acrobat Reader

Architecture: x86_64
Build: 17.9.20044.222436
AGM: 4.30.69
CoolType: 5.14.5
JP2K: 1.2.2.38123

eKoopmans · 2017-05-14T03:22:18Z

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).

alundiak · 2017-05-14T14:20:59Z

@eKoopmans :) I tried, and the reality of JS proves that all works fine now. Silly, but have to admit. One bundle would be great.

eKoopmans · 2017-05-14T18:44:22Z

Agreed, I'll make a bundle (and NPM package info etc) in the near future. Thanks for helping track down this problem!

lidijarad · 2017-05-14T19:59:21Z

@eKoopmans, I have updated the order in which I load the files and am using your modified versions of the other libs and the output of the pdf seems to be good now. Thank you so much for tending to this so promptly.

eKoopmans · 2017-05-14T20:11:26Z

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

eKoopmans · 2017-12-05T07:45:09Z

Btw, bundle was added in v0.8.0.

alundiak closed this as completed May 14, 2017

eKoopmans mentioned this issue May 15, 2017

Graph not showing in pdf #10

Closed

eKoopmans mentioned this issue Aug 10, 2017

In IE 10 & above browser, PDF file downloading issue #24

Closed

eKoopmans mentioned this issue Sep 17, 2017

Page break does not seem to increase document height #31

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"html2pdf__page-break" gives unexpected vertical left aligned line #2

"html2pdf__page-break" gives unexpected vertical left aligned line #2

alundiak commented May 3, 2017

eKoopmans commented May 3, 2017

lidijarad commented May 12, 2017 •

edited

eKoopmans commented May 12, 2017

alundiak commented May 12, 2017

eKoopmans commented May 12, 2017

alundiak commented May 12, 2017

alundiak commented May 12, 2017 •

edited

eKoopmans commented May 12, 2017

alundiak commented May 13, 2017

eKoopmans commented May 13, 2017

alundiak commented May 13, 2017 •

edited

eKoopmans commented May 14, 2017

alundiak commented May 14, 2017

eKoopmans commented May 14, 2017

lidijarad commented May 14, 2017 •

edited

eKoopmans commented May 14, 2017

eKoopmans commented Dec 5, 2017

"html2pdf__page-break" gives unexpected vertical left aligned line #2

"html2pdf__page-break" gives unexpected vertical left aligned line #2

Comments

alundiak commented May 3, 2017

eKoopmans commented May 3, 2017

lidijarad commented May 12, 2017 • edited

eKoopmans commented May 12, 2017

alundiak commented May 12, 2017

eKoopmans commented May 12, 2017

alundiak commented May 12, 2017

alundiak commented May 12, 2017 • edited

eKoopmans commented May 12, 2017

alundiak commented May 13, 2017

eKoopmans commented May 13, 2017

alundiak commented May 13, 2017 • edited

eKoopmans commented May 14, 2017

alundiak commented May 14, 2017

eKoopmans commented May 14, 2017

lidijarad commented May 14, 2017 • edited

eKoopmans commented May 14, 2017

eKoopmans commented Dec 5, 2017

lidijarad commented May 12, 2017 •

edited

alundiak commented May 12, 2017 •

edited

alundiak commented May 13, 2017 •

edited

lidijarad commented May 14, 2017 •

edited