Html2canvas: IE Browser,no table borders appear on Canvas

[surajshaha]

Hi,

I have html page returned from server,and it contains one table with border for each th and td in one of the inner table.The plugin is working correctly on Chrome,safari,firefox but IE does not show up the borders of inner table.The borders of outer table are displayed correctly.

Is there any workaround for this ?
Thanks.

[adam-roth]

I've also encountered this issue. It happens even if you're not using nested tables.

The failure point also appears to be somewhat arbitrary, as I've had cases where some of the table borders appear correctly in IE and then all of a sudden they just disappear from subsequent table rows with comparable content.

Typically once the table border disappears, it does not come back further down in the table.

[surajshaha]

There is one work around for this :

for every td,th apply : border-bottom:1px solid black;border-right:1px solid black; border-top:1px solid black;border-left:1px solid black; wherever necessary and add border-collapse: collapse.

Hope this helps.

[adam-roth]

Thanks for the suggestion, although it didn't work for me. I'm still getting missing table borders in IE (and also wrong colored ones too, as they should all be black but I'm seeing some gray in there):

Edit: On the most recent version of html2canvas, the borders appear correctly when using the suggested workaround.

[aju31a]

I am sorry to say but i am unable solve this issue with the said solution too,can anybody let me know how to do this please its really urgent

[CarlosHBP]

I'm using html2canvas 0.5.0-alpha1.

I found a solution. Change the parseInt to parseFloat:

UPDATED: Already has a cssFloat function!

At NodeParser.prototype.parseBorders:

        return {
            width: container.cssInt('border' + side + 'Width'),
            color: colorTransform ? color[colorTransform[0]](colorTransform[1]) : color,
            args: null
        };

to:

        return {
            width: container.cssFloat('border' + side + 'Width'),
            color: colorTransform ? color[colorTransform[0]](colorTransform[1]) : color,
            args: null
        };

IE (and Edge) returned 0.5px when my width was 1px.

I tested on IE 11, Edge and Chrome (Windows).

[dsauerbrun]

God damn this was a nasty issue to track down. A client of mine experienced this on windows 8 chrome but not firefox and another client experienced this on windows 10 firefox but not chrome.

This solution also worked for me... what are the chances that this gets included in the next release?

it appears to be super simple change @niklasvh any thoughts?

I'm using [email protected]

[niklasvh]

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

[niklasvh]

@dsauerbrun https://github.com/niklasvh/html2canvas/blob/master/src/parsing/border.js#L42 should be fine in 1.0.0

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[wahyukodar]

@dsauerbrun https://github.com/niklasvh/html2canvas/blob/master/src/parsing/border.js#L42 should be fine in 1.0.0

I'm using v1.0.0-alpha.12, That is still error