Generieren einer PDF-Datei von React Components

Question

Ich habe eine Abfrageanwendung erstellt. Die Leute sind in der Lage, ihre Umfragen zu erstellen und Daten über die Fragen zu erhalten, die sie stellen. Ich möchte die Funktionalität hinzufügen, damit die Benutzer die Ergebnisse in Form einer PDF herunterladen können.

Zum Beispiel habe ich zwei Komponenten, die für das Ergreifen der Frage und Daten verantwortlich sind.

<QuestionBox /> 
<ViewCharts /> 

Ich versuche, beide Komponenten in eine PDF-Datei auszugeben. Der Benutzer kann dann diese PFD-Datei herunterladen. Ich habe ein paar Pakete gefunden, die das Rendern einer PDF in einer Komponente erlauben. Ich habe jedoch keine gefunden, die PDF aus einem Eingabestream erzeugen kann, der aus einem virtuellen DOM besteht. Wenn ich das von Grund auf erreichen möchte, welchem ​​Ansatz sollte ich folgen?

Answer 1

Rendering reagieren als PDF ist in der Regel ein Schmerz, aber es gibt einen Weg um es mit Leinwand.

Die Idee ist, zu konvertieren: HTML -> Canvas -> PNG (oder JPEG) -> PDF

die oben Um das zu erreichen, müssen Sie:

1. html2canvas &
2. jsPDF

import React, {Component, PropTypes} from 'react'; 
 

 
// download html2canvas and jsPDF and save the files in app/ext, or somewhere else 
 
// the built versions are directly consumable 
 
// import {html2canvas, jsPDF} from 'app/ext'; 
 

 

 
export default class Export extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    } 
 

 
    printDocument() { 
 
    const input = document.getElementById('divToPrint'); 
 
    html2canvas(input) 
 
     .then((canvas) => { 
 
     const imgData = canvas.toDataURL('image/png'); 
 
     const pdf = new jsPDF(); 
 
     pdf.addImage(imgData, 'JPEG', 0, 0); 
 
     // pdf.output('dataurlnewwindow'); 
 
     pdf.save("download.pdf"); 
 
     }) 
 
    ; 
 
    } 
 

 
    render() { 
 
    return (<div> 
 
     <div className="mb5"> 
 
     <button onClick={this.printDocument}>Print</button> 
 
     </div> 
 
     <div id="divToPrint" className="mt4" {...css({ 
 
     backgroundColor: '#f5f5f5', 
 
     width: '210mm', 
 
     minHeight: '297mm', 
 
     marginLeft: 'auto', 
 
     marginRight: 'auto' 
 
     })}> 
 
     <div>Note: Here the dimensions of div are same as A4</div> 
 
     <div>You Can add any component here</div> 
 
     </div> 
 
    </div>); 
 
    } 
 
}

Das Snippet wird hier nicht funktionieren, da die erforderlichen Dateien nicht importiert werden.

Ein alternativer Ansatz wird in this answer verwendet, wo die mittleren Schritte fallen gelassen werden und Sie einfach von HTML zu PDF konvertieren können. Es gibt eine Option, dies auch in der jsPDF-Dokumentation zu tun, aber nach persönlicher Beobachtung glaube ich, dass eine bessere Genauigkeit erreicht wird, wenn dom zuerst in png umgewandelt wird.