Generar un PDF desde el componente React

Ocasionalmente necesitamos producir un archivo PDF a partir de los componentes de React. Este tutorial analizará la creación de un archivo PDF a partir de componentes de React.

Generar un PDF desde el componente React

React es un marco de desarrollo front-end ampliamente utilizado. Ocasionalmente, necesitamos producir documentos PDF mientras diseñamos aplicaciones en línea, y puede ser una página web completa o solo un componente.

Podemos usar las bibliotecas jspdf y react-dom/server para producir un archivo PDF usando componentes React.

Para comenzar, use el siguiente comando para instalar el paquete npm jspdf.

npm install jspdf --save

Por defecto, react-dom/server incluye proyectos generados por Create React App.

Después de la instalación, debe importar ese paquete a su componente React apropiado.

import JsPDF from 'jspdf';
import ReactDOMServer from 'react-dom/server';

Ahora, desarrollaremos una función para producir y exportar archivos PDF. Veamos el ejemplo completo:

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

const document = new jsPDF();
const Shiv =
    <b>You have Downlaoded a component from react<
        /b>;

export default function App() {
  const save = () => {
    document.html(ReactDOMServer.renderToStaticMarkup(Shiv), {
      callback: () => {
        document.save("yourDoc.pdf");
      },
    });
  };

  return (
    <div>
      <button onClick={save}>React Component to pdf</button><
    /div>
  );
}

Creamos una nueva instancia de objeto de función jsPDF y la asignamos a document. Luego, está la instrucción JSX Shiv, que muestra texto en negrita.

A continuación, en App(), escribimos la función guardar, que llama al método document.html utilizando la cadena HTML generada por el método renderToStaticMarkup.

renderToStaticMarkup es útil cuando se eliminan las características adicionales y puede ahorrar algunos bytes si desea utilizar React como generador principal de páginas estáticas. No use este enfoque si está utilizando React en el cliente para hacer que el marcado sea interactivo.

En su lugar, use ReactDOM y renderToString en el servidor.

Producción:

Puede ver un botón que ayudará a descargar un componente de React en pdf. Al hacer clic en él, se descargará un archivo llamado yourDoc.