title: Converting react component to pdf with no sucess (html2canvas and dom-to-image)
body: <p>I am trying to convert a react component to pdf, but with no success.</p>
  
  <p>i have a file called: 'automatic-report.js: For demonstrantion purposes i have two functions called 'printDocument()'. One using html2canvas and another one dom-to-image.</p>
  
  <pre><code>...
  import html2canvas from 'html2canvas';
  import JSpdf from 'jspdf';
  //import domToImage from 'dom-to-image'
  
  class AutomaticReport extends Component {
      componentDidMount() {
          this.printDocument = this.printDocument.bind(this);
      ...
  }
  
  printDocument() { //with html2canvas
      const input = document.getElementById('divToPrint');
      html2canvas(input)
          .then((canvas) =&gt; {
              const imgData = canvas.toDataURL('image/png');
              const pdf = new JSpdf();
              pdf.addImage(imgData, 'PNG', 0, 0);
              pdf.save('download.pdf');
          })
      ;
  }
  
  printDocument() { //with html2canvas
    const input = document.getElementById('elementId');
    domtoimage.toPng(input)
      .then((dataUrl) =&gt; {
  
         const pdf = new jsPDF();
         const width = pdf.internal.pageSize.width;
         const height = pdf.internal.pageSize.height;
         pdf.addImage(dataUrl, 'PNG', 0, 0, width, height);
         pdf.save('download.pdf');
      })
     .catch((error) =&gt; {
        console.error('something went wrong!', error);
      });
  }
  
  render() {
      panelContent = (
         &lt;Panel title="Report" header={true} href={panelStyle}&gt;
            &lt;div className="row"&gt;
                   ...
               &lt;div className="col-md-6"&gt;
                  &lt;div style={{height: 100, width: 100}}&gt;
                   &lt;img className="img-responsive" src={this.client.picture_url}/&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
                    ..
                      &lt;div className="row"&gt;
                          &lt;RefrigerationPieChart /&gt;
                          &lt;RegenerativeBrakingPieChart /&gt;
                          &lt;VehicleTable /&gt;
                           ...
                      &lt;/div&gt;
  
      &lt;/panel&gt;);
  
  
      return (
          &lt;div
              id="divToPrint"
              style={{
                  width: '20cm',
                  minHeight: '29.7cm',
                  border: '1px #D3D3D3 solid',
                  borderRadius: '5px',
                  background: 'white',
                  boxShadow: '0 0 5px rgba(0, 0, 0, 0.1)',
                  size: 'A4',
                  margin: 'auto'
              }}&gt;
              {panelContent}
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Both libraries does not print properly the pdf. Here 3 prints:</p>
  
  <p><a href="https://i.stack.imgur.com/38s75.png" rel="nofollow noreferrer">Original</a></p>
  
  <p><a href="https://i.stack.imgur.com/UfAgL.png" rel="nofollow noreferrer">html2canvas</a> - Does not display images, either external css. Only inline css.</p>
  
  <p><a href="https://i.stack.imgur.com/IHEY4.png" rel="nofollow noreferrer">dom-to-imag</a> -Although css os okay, the pdf is blurred and cannot print images too.</p>
  
  <p>Does anyone can help me figured it out how to convert properly with one of these two libraries?</p>