SimplePDF Editor zu Ihrer Next.js App hinzufügen

Benjamin André-Micolon

Next.js ist zum Standard für die Entwicklung von React-Anwendungen geworden. SimplePDF selbst basiert auf Next.js!

Daher ist Next.js die beste Wahl, um Ihnen zu zeigen, wie Sie den SimplePDF Editor in Ihre eigene App einbinden.

Sie können dieses Tutorial überspringen und direkt zum Code gehen, der im SimplePDF Embed Github-Repository verfügbar ist.

Schritt 1: Projekt einrichten

Wenn Sie bereits eine laufende Next.js- oder React-App haben, können Sie direkt zu Schritt 2: SimplePDF Embed-Abhängigkeit hinzufügen oder Schritt 3: SimplePDF Editor zur Next.js App hinzufügen springen

Beginnen wir mit dem Next.js CLI-Tool, um unser Projekt interaktiv einzurichten.

Führen Sie den folgenden Befehl in Ihrem Terminal aus und folgen Sie den Schritten.

npx create-next-app@latest
# oder
yarn create next-app
# oder
pnpm create next-app

1. Wählen Sie einen Namen für das Projekt:

? What is your project named? › simple-pdf-react-embed-example

2. Bei SimplePDF mögen wir TypeScript, also sagen wir "Ja!" zum nächsten Schritt.

Dies ist keine Voraussetzung, also keine Sorge, wenn Sie mit TypeScript nicht vertraut sind!

? Would you like to use TypeScript with this project? › No / Yes

3. Verwenden wir auch ESLint

ESLint ist ebenfalls keine Voraussetzung, also sagen Sie einfach Nein, wenn Sie damit nicht vertraut sind

Would you like to use ESLint with this project? › No / Yes

4. Zeit für den Computer, etwas Arbeit zu erledigen: Abhängigkeiten werden abgerufen und installiert

Wir verwenden yarn - wenn Sie z. B. npm nutzen, wird die Meldung leicht abweichen

info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[#####################################-------------------------------------------------------] 105/263

5. Nach erfolgreicher Installation sollte diese Meldung erscheinen:

Success! Created simple-pdf-react-embed-example at /Users/bendersej/workspace/widget-simplepdf/react/simple-pdf-react-embed-example

6. Navigieren Sie zum Ordner

cd simple-pdf-react-embed-example/

7. Und starten Sie das Projekt!

yarn dev
# oder
npm dev

8. Wenn alles geklappt hat, sollten Sie Folgendes sehen:

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 529 ms (165 modules)

Der Server läuft unter folgender URL: http://localhost:3000

Das sollten Sie sehen

Es kann je nach Zeitpunkt des Tutorials kleine Unterschiede geben

Schritt 2: SimplePDF Embed-Abhängigkeit zum Projekt hinzufügen

Voraussetzung: eine lokal laufende React (Next.js) App - wenn Sie dem vorherigen Schritt gefolgt sind, sind Sie bereit!

Bestätigen Sie, dass Sie am richtigen Ort sind: Der folgende Befehl

ls

sollte diese Dateien auflisten:

README.md      next.config.js package.json   public         tsconfig.json  yarn.lock
next-env.d.ts  node_modules   pages          styles         yarn-error.log

Fügen wir @simplepdf/react-embed-pdf zu unserem Projekt hinzu

1. Installieren Sie @simplepdf/react-embed-pdf

yarn add @simplepdf/react-embed-pdf
# oder
npm install @simplepdf/react-embed-pdf

Nach der Installation sollte folgende Meldung erscheinen:

Wir verwenden yarn - wenn Sie z. B. npm nutzen, wird die Meldung leicht abweichen

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @simplepdf/react-embed-pdf@1.3.0
info All dependencies
└─ @simplepdf/react-embed-pdf@1.3.0
✨  Done in 5.91s.

Zeit für etwas React-Code!

Schritt 3: SimplePDF Editor zur Next.js App hinzufügen

In diesem Schritt fügen wir die SimplePDF Editor-Komponente hinzu: Diese Komponente ermöglicht es, beliebige PDFs innerhalb Ihrer Anwendung zu öffnen.

Öffnen Sie den Code Ihrer App im Code-Editor Ihrer Wahl - bei SimplePDF verwenden wir VSCode

1. Räumen wir etwas auf, indem wir alles innerhalb von main entfernen und den Seitentitel aktualisieren:

Der Code sollte nun so aussehen:

import Head from 'next/head'
import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>SimplePDF Embed Example</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
      </main>
    </>
  )
}

Und der Browser sollte Folgendes anzeigen: nichts!

2. Importieren Sie die EmbedPDF-Komponente am Anfang der Datei:

import { EmbedPDF } from '@simplepdf/react-embed-pdf';

3. Und fügen Sie sie zum Code hinzu:

Beachten Sie, dass Sie nur ein Kind-Element innerhalb von EmbedPDF benötigen. Es kann jedes HTML-Element sein: a, div, button...

<EmbedPDF>
  <div className={inter.className}>
    <div className={styles.card}>Open SimplePDF!</div>
  </div>
</EmbedPDF>

Der gesamte Code sollte wie folgt aussehen:

import Head from 'next/head'
import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'
import { EmbedPDF } from '@simplepdf/react-embed-pdf';

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>SimplePDF Embed Example</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <EmbedPDF>
          <div className={inter.className}>
            <div className={styles.card}>Open SimplePDF!</div>
          </div>
        </EmbedPDF>
      </main>
    </>
  )
}

Und der Browser sollte Folgendes anzeigen: eine kleine "Open SimplePDF!"-Schaltfläche!

Schritt 4: Wie geht es weiter?

SimplePDF Embed ist leistungsstark und es gibt noch mehr zu entdecken:

• Ein bestimmtes Dokument öffnen, indem Sie die URL dieses Dokuments angeben
• Events empfangen, wenn das Dokument geladen wird und die Einreichung gesendet wird
• Eigenes Branding hinzufügen

Mehr dazu erfahren Sie in der Dokumentation auf Github.

Wir hoffen, Ihnen hat dieses Tutorial gefallen!

Wenn Sie Fragen oder Anmerkungen haben, lassen Sie es uns über die Feedback-Schaltfläche unten rechts auf Ihrem Bildschirm wissen