Преобразование реагирующего компонента в pdf без успеха (html2canvas и dom-to-image) - PullRequest
Новая
       10

Преобразование реагирующего компонента в pdf без успеха (html2canvas и dom-to-image)

0 голосов
/ 27 апреля 2018

Я пытаюсь преобразовать компонент реагирования в 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 отпечатка:

Оригинал

html2canvas - Не отображаются изображения, ни внешние css. Только встроенный css.

dom-to-imag - Хотя css os в порядке, PDF-файл размыт и не может печатать изображения.

Кто-нибудь может мне помочь разобраться, как правильно конвертировать с одной из этих двух библиотек?

1 Ответ

0 голосов
/ 01 марта 2019

Вы были очень близки, попробуйте этот подход. Я использую 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");
    });
  };

Код sampe здесь
https://codesandbox.io/s/4j222063y4

...