Converting react component to pdf with no sucess (html2canvas and dom-to-image)

Question

I am trying to convert a react component to pdf, but with no success.

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.

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

       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) => {
      console.error('something went wrong!', error);
    });
}

render() {
    panelContent = (
       <Panel title="Report" header={true} href={panelStyle}>
          <div className="row">
                 ...
             <div className="col-md-6">
                <div style={{height: 100, width: 100}}>
                 <img className="img-responsive" src={this.client.picture_url}/>
                </div>
             </div>
                  ..
                    <div className="row">
                        <RefrigerationPieChart />
                        <RegenerativeBrakingPieChart />
                        <VehicleTable />
                         ...
                    </div>

    </panel>);


    return (
        <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'
            }}>
            {panelContent}
        </div>
    );
}

}

Both libraries does not print properly the pdf. Here 3 prints:

Original

html2canvas - Does not display images, either external css. Only inline css.

dom-to-imag -Although css os okay, the pdf is blurred and cannot print images too.

Does anyone can help me figured it out how to convert properly with one of these two libraries?

Answer 1

You were very close, try this approach. I'm using html2canvas and pdf maker

  // Generate the pdf based on a component
  printToPdf = () => {
    html2canvas(document.getElementById("print_to_pdf")).then(canvas => {
      var data = canvas.toDataURL();
      var pdfExportSetting = {
        content: [
          {
            image: data,
            width: 500
          }
        ]
      };
      pdfMake.createPdf(pdfExportSetting).download("test_file.pdf");
    });
  };

Code sampe here
https://codesandbox.io/s/4j222063y4