将反应组件转换为pdf而没有成功（html2canvas和dom-to-image）

Question

我试图将反应组件转换为pdf，但没有成功。

我有一个名为''automatic-report.js的文件：出于演示目的，我有两个名为'printDocument（）'的函数。一个使用html2canvas，另一个使用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>
    );
}

}

两个库都无法正确打印pdf。这3张照片：

Original

html2canvas - 不显示图像，外部css。只有内联css。

dom-to-imag - 虽然css os没问题，但pdf模糊不清，无法打印图像。

有没有人可以帮我弄清楚如何正确转换这两个库中的一个？

Answer 1

你非常接近，尝试这种方法。我正在使用html2canvas和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");
    });
  };

代码在这里签名 https://codesandbox.io/s/4j222063y4