title: Duplicate content in pdf created using jsPDF
body: <p>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. </p>
  
  <p>e.g. If the charts have legends, they are getting duplicated. See the screenshot below. City names and the percentages are repeated.  </p>
  
  <p><a href="https://i.stack.imgur.com/LZCD1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LZCD1.png" alt="enter image description here"></a></p>
  
  <p>Below is the code to create pdf.</p>
  
  <pre><code>pdf.addHTML($("#page1"), options, function(){
              pdf.addPage();
              pdf.addHTML($("#page2"), options, function(){
                  pdf.addPage();
                  pdf.output('dataurlnewwindow');
              });
          });
  </code></pre>
  
  <p><strong>EDIT 1:</strong></p>
  
  <p>This is what I have figured so far.</p>
  
  <pre><code>&lt;div id="outerDiv"&gt;
      &lt;div id="pieChart"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I do this, <code>pdf.addHTML($("#pieChart")</code>, no issues here.</p>
  
  <p>But, when I do this, <code>pdf.addHTML($("#outerDiv")</code>, then labels get repeated.</p>
  
  <p>and this is how I generate my c3js charts</p>
  
  <pre><code>var pieChart  = c3.generate({
              bindto: '#pieChart',
  </code></pre>
  
  <p><strong>EDIT 2:-</strong></p>
  
  <p>Below is my entire code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js"&gt;&lt;/script&gt;
  
      &lt;script type='text/javascript'&gt;
      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'
              }
          });
      }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class="content"&gt;
      &lt;table width="100%"&gt;
          &lt;tr&gt;
              &lt;td width="50%"&gt;
                  &lt;div id="chartOuter"&gt;
                      &lt;div id="chart"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2" align="left"&gt;
                  &lt;input type="button" onclick="genPDF();" value="Generate PDF" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>EDIT 3:-</strong></p>
  
  <p>I tried just converting html to canvas using html2canvas. It is also giving the same issue.</p>
  
  <p><strong>Edit 4:</strong></p>
  
  <p>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.   </p>
  
  <p>Edited the question with modified js.</p>