Duplicate content in pdf created using jsPDF

Question

I am using jsPDF to convert html to pdf. In some cases, where html has svg charts, some of the data is duplicated in the generated pdf.

e.g. If the charts have legends, they are getting duplicated. See the screenshot below. City names and the percentages are repeated.

enter image description here

Below is the code to create pdf.

pdf.addHTML($("#page1"), options, function(){
            pdf.addPage();
            pdf.addHTML($("#page2"), options, function(){
                pdf.addPage();
                pdf.output('dataurlnewwindow');
            });
        });

EDIT 1:

This is what I have figured so far.

<div id="outerDiv">
    <div id="pieChart"></div>
</div>

When I do this, pdf.addHTML($("#pieChart"), no issues here.

But, when I do this, pdf.addHTML($("#outerDiv"), then labels get repeated.

and this is how I generate my c3js charts

var pieChart  = c3.generate({
            bindto: '#pieChart',

EDIT 2:-

Below is my entire code.

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
    <script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js"></script>

    <script type='text/javascript'>
    function replaceAllSVGsWithTempCanvas(elemSelector) {
        var svgElements = $(elemSelector).find('svg');

        //replace all svgs with a temp canvas
        svgElements.each(function() {
            var canvas, xml;

            // canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element.
            $.each($(this).find('[style*=em]'), function(index, el) {
                $(this).css('font-size', getStyle(el, 'font-size'));
            });

            canvas = document.createElement("canvas");
            canvas.className = "screenShotTempCanvas";

            //convert SVG into a XML string
            xml = (new XMLSerializer()).serializeToString(this);

            // Removing the name space as IE throws an error
            xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

            //draw the SVG onto a canvas
            canvg(canvas, xml);
            $(canvas).insertAfter(this);

            //hide the SVG element
            $(this).attr('class', 'tempHide');
            $(this).hide();
        });
    }

    jQuery(document).ready(function($) {
        genChart();
    });

    function genPDF() {
        var options = {
            background: '#fff'
        };
        var pdf = new jsPDF('p', 'pt', 'a4');

        replaceAllSVGsWithTempCanvas(".content");

        pdf.addHTML($("#chartOuter"), options, function() {
            pdf.output('dataurlnewwindow');

            $(".content").find('.screenShotTempCanvas').remove();
            $(".content").find('.tempHide').show().removeClass('tempHide');

        });
    }

    function genChart() {
        var chart = c3.generate({
            data: {
                columns: [
                    ['data1', 30],
                    ['data2', 120],
                ],
                type: 'pie'
            }
        });
    }
    </script>
</head>

<body class="content">
    <table width="100%">
        <tr>
            <td width="50%">
                <div id="chartOuter">
                    <div id="chart"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left">
                <input type="button" onclick="genPDF();" value="Generate PDF" />
            </td>
        </tr>
    </table>
</body>

</html>

EDIT 3:-

I tried just converting html to canvas using html2canvas. It is also giving the same issue.

Edit 4:

I could fix the duplicate issue now. But the charts and the text written to pdf are little bit blurry. Basically, I added function replaceAllSVGsWithTempCanvas and then use that while writing to pdf. But it seems this function does smething to the html that makes content written to pdf blurry. In fact pie charts etc, are no more circles but looks like oval shape.

Edited the question with modified js.

Gokhan Kurt · Accepted Answer

Looks like it is a bug in html2canvas. You should add the bottom code after html2canvas is loaded to fix that (Credits goes to this guy):

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

Fiddle

Since html2canvas loads as a module, you should directly find NodeParser.prototype.getChildren in the source code and edit it to match above. That means you can't load it from CDN.

Louys Patrice Bessette · Answer

I think made it work correctly in two steps.
First, I commented out the "addhtml plugin" because I had this error in my console:

Refused to execute script from 'https://raw.githubusercontent.com/MrRio/jsPDF/master/plugins/addhtml.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

Second, I changed the pdf source from #chartOuter to #chart.

    pdf.addHTML($("#chart"), options, function () {
    var string = pdf.output('datauristring');
    $('.preview-pane').attr('src', string)
});

And there is no more dedoubling.

-----
EDIT (since I misunderstood the question at first)

It is needed to use the outer div... And maybe the full page.

Okay... To be honest, I don't know why this text issue happens.
But I noticed that the duplicate text has serif even if it is specified "sans-serif".
So I focused on this.
I tried to change the font-size... It affected the duplicate, but the text didn't follow the css rule. Okay.

Then I tried to just remove the text before the pdf creation part... And magic!
;)

$(".c3 svg").css({"font-size":"0px"});

Here is the complete script, I didn't touch the rest of your original code.

jQuery(document).ready(function ($) {
        genChart();
    });

    function genPDF() {
        var options = { background: '#fff'};
        var pdf = new jsPDF('p', 'pt', 'a4');

        $(".c3 svg").css({"font-size":"0px"});    // <-- This does the trick !

        pdf.addHTML($("#chartOuter"), options, function () {
            var string = pdf.output('datauristring');
            $('.preview-pane').attr('src', string)
        });
    }

    function genChart() {
        var chart = c3.generate({
            data: {
                columns: [
                    ['data1', 30],
                    ['data2', 120],
                ],
                type : 'pie'
            }
        });
    }

Marco · Answer

You can try using ChartJS instead of C3.

I've adapted your code and tried it with success.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script> -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/MrRio/jsPDF/master/plugins/addhtml.js"></script>

    <script type='text/javascript'>

        jQuery(document).ready(function ($) {
            genChart();
        });

        function genPDF() {
            var options = { background: '#fff'};
            var pdf = new jsPDF('p', 'pt', 'a4');

            pdf.addHTML($("#chartOuter"), options, function () {
                var string = pdf.output('datauristring');
                $('.preview-pane').attr('src', string)
            });
        }

        function genChart () {
          var ctx = $("#chart");
          var options = {};

          var myPieChart = new Chart(ctx, {
              type: 'pie',
              data: {
                    labels: [
                        "data1",
                        "data2"
                    ],
                    datasets: [{
                            data: [30, 120],
                            backgroundColor: [
                                "#FF6384",
                                "#36A2EB"
                            ],
                            hoverBackgroundColor: [
                                "#FF6384",
                                "#36A2EB"
                            ]
                        }]
                },
              options: options
          });
        }
    </script>
</head>
<body>

    <table width="100%">
        <tr>
            <td width="50%">
                <div id="chartOuter">
                    <!-- <div id="chart"></div> -->
                    <canvas id="chart" width="400" height="400"></canvas>
                </div>
            </td>
            <td>
                <iframe height="550px" class="preview-pane" type="application/pdf" width="100%" frameborder="0" style="position:relative;z-index:999"></iframe>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left">
                <input type="button" onclick="genPDF();" value="Generate PDF"/>
            </td>
        </tr>
    </table>

</body>
</html>

Duplicate content in pdf created using jsPDF

Tags:

javascript

jspdf

ashishjmeshram

3 Answers

Gokhan Kurt

Louys Patrice Bessette

Marco

Recent Activity

Donate For Us

Duplicate content in pdf created using jsPDF

Tags:

javascript

jspdf

ashishjmeshram

3 Answers

Gokhan Kurt

Louys Patrice Bessette

Marco

Related questions

Recent Activity

Donate For Us