Generieren Sie eine PDF-Datei aus der React-Komponente

Gelegentlich müssen wir eine PDF-Datei aus React-Komponenten erstellen. Dieses Tutorial befasst sich mit dem Erstellen einer PDF-Datei aus React-Komponenten.

Generieren Sie eine PDF-Datei aus der React-Komponente

React ist ein weit verbreitetes Frontend-Entwicklungsframework. Gelegentlich müssen wir beim Entwerfen von Online-Apps PDF-Dokumente erstellen, und es kann eine ganze Webseite oder nur eine Komponente sein.

Wir können die Bibliotheken jspdf und react-dom/server verwenden, um eine PDF-Datei mit React-Komponenten zu erstellen.

Verwenden Sie zunächst den folgenden Befehl, um das npm-Paket jspdf zu installieren.

npm install jspdf --save

Standardmäßig enthält react-dom/server Projekte, die von Create React App generiert wurden.

Nach der Installation müssen Sie dieses Paket in Ihre entsprechende React-Komponente importieren.

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

Jetzt werden wir eine Funktion entwickeln, um PDFs zu erzeugen und zu exportieren. Sehen wir uns das vollständige Beispiel an:

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>
  );
}

Wir haben eine neue Funktionsobjektinstanz jsPDF erstellt und sie document zugewiesen. Dann gibt es die JSX-Anweisung Shiv, die fetten Text anzeigt.

Danach schreiben wir in App() die save-Funktion, die die document.html-Methode mit dem von der renderToStaticMarkup-Methode generierten HTML-String aufruft.

renderToStaticMarkup ist nützlich, wenn Sie die zusätzlichen Eigenschaften entfernen und einige Bytes sparen können, wenn Sie React als primären statischen Seitengenerator verwenden möchten. Verwenden Sie diesen Ansatz nicht, wenn Sie React auf dem Client verwenden, um das Markup interaktiv zu machen.

Verwenden Sie stattdessen ReactDOM und renderToString auf dem Server.

Ausgang:

Sie können eine Schaltfläche sehen, die Ihnen hilft, eine React-Komponente im PDF-Format herunterzuladen. Wenn Sie darauf klicken, wird eine Datei namens yourDoc. heruntergeladen.