Generando un archivo PDF a partir de React Components

Solución:

Representar reaccionar como pdf es generalmente un dolor, pero hay una forma de evitarlo usando canvas.

La idea es convertir: HTML -> Canvas -> PNG (o JPEG) -> PDF

Para lograr lo anterior, necesitará:

1. html2canvas y
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>);
  }
}

El fragmento no funcionará aquí porque los archivos requeridos no se importan.

Se está utilizando un enfoque alternativo en esta respuesta, donde se eliminan los pasos intermedios y simplemente puede convertir de HTML a PDF. También hay una opción para hacer esto en la documentación de jsPDF, pero por observación personal, creo que se logra una mayor precisión cuando dom se convierte en png primero.

Actualización 0:14 de septiembre de 2018

El texto de los archivos PDF creados con este enfoque no se podrá seleccionar. Si ese es un requisito, este artículo puede resultarle útil.

puedes usar canvans con jsPDF

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

 _exportPdf = () => {

     html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas);  // if you want see your screenshot in body.
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 0, 0);
        pdf.save("download.pdf"); 
    });

 }

y tu div con captura de identificación es:

ejemplo

<div id="capture">
  <p>Hello in my life</p>
  <span>How can hellp you</span>
</div>

Puede usar ReactDOMServer para renderizar su componente en HTML y luego usarlo en jsPDF.

Primero haz las importaciones:

import React from "react";
import ReactDOMServer from "react-dom/server";
import jsPDF from 'jspdf';

luego:

var doc = new jsPDF();
doc.fromHTML(ReactDOMServer.renderToStaticMarkup(this.render()));
doc.save("myDocument.pdf");

Prefiero usar:

renderToStaticMarkup

en lugar de:

renderToString

Como los primeros incluyen código HTML en el que se basa reaccionar.

---

---

Utiliza Nuestro Buscador