Überprüfungen und Genehmigungen

Viele Unternehmen benötigten während der Covid-19-Pandemie die Zusammenarbeit im Team auf verschiedenen Geräten. Freigeben und Überprüfen digitaler Dokumente stellt eine Reihe von Herausforderungen für Teams und funktionsübergreifende Ressourcen dar.

Diese Herausforderungen umfassen das Freigeben von Dokumenten in verschiedenen Dateiformaten, das effektive Überprüfen und Kommentieren des Inhalts sowie die Synchronisierung mit den neuesten Bearbeitungen. Adobe Acrobat Services APIs sind so konzipiert, dass Anwendungsentwickler diese Herausforderungen für ihre Benutzer lösen können.

Lernziel.

Dieses praktische Tutorial zeigt, wie Sie einen Workflow für die Überprüfung und Genehmigung von Dokumenten in einer Node.js- und einer Express-Webanwendung erstellen. Um dieses Tutorial nachzuvollziehen, benötigen Sie Erfahrung mit Node.js.

Die Anwendung verfügt über die folgenden Funktionen:

Relevante APIs und Ressourcen

Erstellen von Adobe API-Zugangsberechtigungen

Bevor Sie den Code starten, müssen Sie Zugangsdaten erstellen für die Adobe PDF Embed-API und die Adobe PDF Services-API. Die PDF Embed-API kann kostenlos verwendet werden. PDF Services API ist sechs Monate lang kostenlos. Dann können Sie zu einer Pay-as-you-go-Plan bei nur $0.05 pro Dokumenttransaktion.

Wenn Sie Anmeldeinformationen für die PDF Services-API erstellen, wählen Sie die Option Erstellen eines personalisierten Codebeispiels und wählen Sie "Node.js" für die Sprache aus. Speichern Sie die ZIP-Datei und extrahieren Sie pdftools-api-credentials.json und private.key in das Stammverzeichnis Ihres Node.js Express-Projekts.

Projekt und Abhängigkeiten einrichten

Richten Sie das Projekt "Node.js" und das Express-Projekt so ein, dass statische Dateien aus einem Ordner mit dem Namen "public" bereitgestellt werden. Sie können Ihre Projektmethoden entsprechend Ihren Vorlieben einrichten. Um schnell loszulegen, können Sie die Express-App-Generator. Oder wenn du die Dinge einfach halten willst, kannst du von vorne beginnen und speichere deinen Code in einer einzigen JavaScript-Datei. Im oben verknüpften Beispielprojekt verwenden Sie den Ein-Datei-Ansatz und behalten den gesamten Code in der Datei "index.js".

Kopieren Sie die pdftools-api-credentials.json und private.key -Dateien aus dem personalisierten Codebeispiel in das Stammverzeichnis des Projekts. Fügen Sie sie auch der .gitignore-Datei hinzu, sofern vorhanden, sodass Ihre Anmeldedaten nicht versehentlich an ein Repository gesendet werden.

Als Nächstes führen Sie npm install @adobe/documentservices-pdftools-node-sdk , um das SDK Node.js für PDF Services zu installieren. Importieren Sie dieses Modul und erstellen Sie das API-Zugangsberechtigungsobjekt in Ihrem Code (index.js in Ihrem Beispielprojekt), nachdem der Rest Ihrer Abhängigkeit wie folgt importiert wurde:

  const PDFToolsSdk = require( "@adobe/documentservices-pdftools-node-sdk" );

  // Create Credentials
  const credentials =  PDFToolsSdk.Credentials
      .serviceAccountCredentialsBuilder()
      .fromFile( "pdftools-api-credentials.json" )
      .build();

Der Startcode sollte wie folgt aussehen:

  const express = require( "express" );
  const PDFToolsSdk = require( "@adobe/documentservices-pdftools-node-sdk" );

  // Create Credentials
  const credentials =  PDFToolsSdk.Credentials
      .serviceAccountCredentialsBuilder()
      .fromFile( "pdftools-api-credentials.json" )
      .build();

  const app = express();

  app.use( express.static( "public" ) );

  app.listen( 8889, function() {
      console.log( "Server started on port", 8889 );
  } );

Jetzt kannst du mit Acrobat Services APIs

Konvertieren einer Datei auf einen PDF

Für den ersten Teil des Dokumenten-Workflows muss der Endbenutzer Dokumente hochladen, um sie freizugeben. Um diese zu aktivieren, fügen Sie eine Upload-Funktion hinzu und konsolidieren die verschiedenen Dokumentdateiformate in PDF, um sie für den Review-Prozess vorzubereiten.

Erstellen Sie zunächst eine Funktion zum Konvertieren von Dokumenten in PDF auf der Grundlage des Beispielfragment für PDF Services API. In diesem Beispiel werden außerdem Snippets für viele andere wichtige Funktionen angezeigt, darunter die optische Zeichenerkennung (OCR), Kennwortschutz und -entfernung sowie Komprimierung.

function fileToPDF( filename, outputFilename, callback ) {
      // Create an ExecutionContext using credentials and create a new operation
  instance.
      const executionContext = PDFToolsSdk.ExecutionContext.create( credentials ),
          createPdfOperation = PDFToolsSdk.CreatePDF.Operation.createNew();

      // Set operation input from a source file.
      const input = PDFToolsSdk.FileRef.createFromLocalFile( filename );
      createPdfOperation.setInput( input );

      // Execute the operation and Save the result to the specified location.
      createPdfOperation.execute( executionContext )
          .then( result => {
              result.saveAsFile( outputFilename );
              callback( outputFilename );
          } );
  }

Sie können diese Funktion jetzt verwenden, um PDF aus hochgeladenen Dokumenten zu erstellen.

Verarbeitung von Dateiuploads

Als Nächstes benötigt der Server einen Datei-Upload-Endpunkt auf dem Webserver, um die Dokumente zu empfangen und zu verarbeiten.

Erstelle zunächst einen Ordner innerhalb eines Uploads-Ordners, und nenne ihn "drafts". Die hochgeladenen Dateien und die konvertierten PDF-Dateien werden hier gespeichert. Als Nächstes führen Sie npm install express-fileupload , um das Express-FileUpload-Modul zu installieren und die Middleware zu Express in Ihrem Code hinzuzufügen:

const fileUpload = require( "express-fileupload" );
app.use( fileUpload() );

Fügen Sie nun ein /upload -Endpunkt und speichern Sie die hochgeladene Datei im Entwurfsordner unter demselben Dateinamen. Rufen Sie dann die vorher geschriebene Funktion auf, um eine PDF-Datei desselben Dokuments zu erstellen, falls sie noch nicht im PDF-Format vorliegt. Sie können einen Dateinamen für die neue PDF-Datei erstellen, der auf dem Namen des hochgeladenen Originaldokuments basiert:

// Create a PDF file from an uploaded file
app.post( "/upload", ( req, res ) => {
    if( !req.files || Object.keys( req.files ).length === 0 ) {
        return res.status( 400 ).send( "No files were uploaded." );
    }

    // Create PDF from the uploaded file
    let file = req.files.myFile;
    file.mv( __dirname + "/uploads/drafts/" + file.name, ( err ) => {
        if( err ) {
            return res.status( 500 ).send( err );
        }
        if( file.name.endsWith( ".pdf" ) ) {
            res.redirect( "/" );
        }
        else {
            // Convert to PDF
            fileToPDF( __dirname + "/uploads/drafts/" + file.name, __dirname + "/uploads/drafts/" + file.name.replace( /\./g, "-" ) + ".pdf", ( file ) => {
                res.redirect( "/" );
            } );
        }
    });
} );

Upload-Seite erstellen

Um Dateien aus der Webanwendung hochzuladen, erstellen Sie jetzt ein index.html -Webseite im Ordner "uploads". Fügen Sie auf der Seite ein Formular für den Datei-Upload hinzu, das die Datei an den Endpunkt /upload sendet:

<form ref="uploadForm"
      action="/upload"
      method="post"
      encType="multipart/form-data">
      <input type="file" name="myFile" accept=".doc,.docx,.ppt,.pptx,.xls,.xlsx,.txt,.rtf,.bmp,.jpg,.gif,.tiff,.png">
      <input type="submit" value="Upload File" />
  </form>

Sie können jetzt Dokumente auf den Server Node.js hochladen. Der Server speichert die Datei im Ordner "uploads/drafts" und erstellt daneben eine PDF-Format-Version.

Sie können die hochgeladenen Dokumente jetzt einbetten. Verwenden Sie daher die PDF Embed-API, um es Benutzern zu ermöglichen, den Dokumenten auf einfache Weise Kommentare und Anmerkungen hinzuzufügen.

Auflisten von PDF-Dateien

Da ein typischer Dokumenten-Workflow mehrere Dokumente umfassen kann, müssen Sie eine Liste von Dokumenten anzeigen und jedes Dokument mit einer neuen Dokumentüberprüfungsseite in Ihrer App verknüpfen.

Fügen Sie zunächst im Servercode einen /files -Endpunkt hinzu, der eine Liste aller PDF-Dateien abruft und zurückgibt, die im Ordner "uploads/drafts" gespeichert sind:

const fs = require( "fs" );

app.get( "/files", ( req, res ) =\> {

fs.readdir( \_\_dirname + "/uploads/drafts/", ( err, files ) =\> {

if( err ) {

return res.status( 500 ).send( err );using

}

return res.json( files.filter( f =\> f.endsWith( ".pdf" ) ) );

} );

} );

Fügen Sie ein /download/:file , der Zugriff auf die hochgeladene PDF-Datei zum Einbetten in die Webseite bietet.

app.get( "/download/:file", function( req, res ){
    // Note: In production code, this should check authentication and user access permissions
    res.download( __dirname + "/uploads/drafts/" + req.params[ "file" ] );
});

Aktualisieren Sie die Seite "index.html" mit einem Dateilistenelement, das zur Ladezeit gefüllt wird. Jedes Element kann mit einer draft.html-Webseite verknüpft werden, und Sie übergeben den Dateinamen mithilfe von Abfragezeichenfolgen-Parametern an die Seite.

  <ul id="filelist">
      <li>Loading documents...</li>
  </ul>

  ...

  <script>
      // Load current files
      fetch( "/files" )
      .then( r => r.json() )
      .then( files => {
          if( files && files.length > 0 ) {
              $( "#filelist" ).empty();
              files.forEach( file => {
                  $( "#filelist" ).append( `<li><a
  href="/draft.html?file=${file}">${file}</a></li>` );
              })
          } else {
                  $("#filelist").append("<div>No documents found.</div>");
                }
      });
  </script>

Einbetten einer PDF

Sie können jetzt PDF-Dateien in Ihre Webanwendung einbetten und anzeigen.

Erstelle eine Webseite mit dem Namen "draft.html". Füge ein div-Element zur eingebetteten PDF hinzu:

  <div id="adobe-dc-view"></div>

Fügen Sie die Acrobat Services Bibliothek:

  <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

Analysieren Sie in einem benutzerdefinierten Skript-Tag den Dateinamen aus den Abfragezeichenfolgen-Parametern, damit Sie wissen, welche Datei auf der Seite eingebettet werden soll:

  <script type="text/javascript">
          let params = new URLSearchParams( window.location.search );
          let filename = params.get( "file" );
  </script>

Fügen Sie einen Dokumentereignislistener für das adobe_dc_view_sdk.ready-Ereignis hinzu, das die angegebene PDF-Datei in eine eingebettete Ansicht innerhalb des div-Elements lädt. Verwenden Sie Ihre Client-ID aus den PDF Embed-API-Zugangsberechtigungen. Sie möchten Kommentare und Anmerkungen aktivieren, also betten Sie die Ansicht in den FULL_WINDOW-Modus ein und legen Sie die Option showAnnotationsTools auf true fest.

  document.addEventListener( "adobe_dc_view_sdk.ready", () => {
      var adobeDCView = new AdobeDC.View( {
          clientId: "YOUR CLIENT ID HERE",
          divId: "adobe-dc-view",
          locale: "en-US",
      } );
      adobeDCView.previewFile( {
          content: { location: { url: "download/" + filename } },
          metaData: { fileName: "Draft Version.pdf" }
      }, {
          embedMode: "FULL_WINDOW",
          showAnnotationTools: true,
          showPageControls: true
      } );
  });

Erstellen eines Benutzerprofils

Standardmäßig werden Kommentare und Anmerkungen in dieser Ansicht als "Gast" angezeigt. Sie können den Namen des aktuellen Reviewers für die Kommentare und Anmerkungen festlegen, indem Sie einen Benutzerprofil-Rückruf im Seitencode für die PDF-Ansicht registrieren. Im Folgenden finden Sie ein Beispielprofil. In einer vollwertigen Anwendung, die Benutzerauthentifizierung enthält, können die Profilinformationen der angemeldeten Benutzersitzung auf diese Weise festgelegt werden, um jeden Kommentator des Dokuments im Überprüfungsworkflow zu identifizieren.

  adobeDCView.registerCallback(
      AdobeDC.View.Enum.CallbackType.GET_USER_PROFILE_API,
      () => {
          return new Promise( ( resolve, reject ) => {
              resolve({
                  code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
                  data: {
                      userProfile: {
                          name: "YOUR NAME",
                          firstName: "FIRST",
                          lastName: "LAST",
                          email: "document.editor@adobe.com"
                      }
                  }
              });
          });
      }
  );

Ihr Profil identifiziert Sie als einen bestimmten Benutzer, wenn Sie ein hochgeladenes Dokument auf dieser Webseite sehen und mit Anmerkungen versehen.

Dokumentfeedback wird gespeichert

Nachdem ein Benutzer ein Dokument kommentiert hat, klickt er auf Speichern. Standardmäßig klicken Sie auf Speichern lädt die aktualisierte PDF-Datei herunter. Ändern Sie diese Aktion, um die aktuelle PDF-Datei auf dem Server zu aktualisieren.

Fügen Sie ein /save Endpunkt auf den Servercode, der die PDF-Datei im Ordner "uploads/drafts" überschreibt:

  // Overwrite the PDF file with latest PDF changes and annotations
  app.post( "/save", ( req, res ) => {
      if( !req.files || Object.keys( req.files ).length === 0 ) {
          return res.status( 400 ).send( "No files were uploaded." );
      }

      let file = req.files.pdf;
      file.mv( __dirname + "/uploads/drafts/" + file.name, ( err ) => {
          if( err ) {
              return res.status( 500 ).send( err );
          }
          res.send( "File uploaded" );
      });
  } );

Registrieren Sie einen PDF-View-Rückruf für die SAVE_API, die den Inhalt auf den /save-Endpunkt hochlädt. Sie können den Wert autoSaveFrequency ändern, damit die Anwendung Änderungen automatisch in einem Zeitgeber speichern kann und bei Abschluss zusätzliche Metadaten in die derzeit eingebettete Datei einbezieht.

  adobeDCView.registerCallback(
      AdobeDC.View.Enum.CallbackType.SAVE_API,
      ( metaData, content, options ) => {
          return new Promise( ( resolve, reject ) => {
              let formData = new FormData();
              formData.append( "pdf", new Blob( [ content ] ), "drafts/" + filename
  );
              fetch( "/save", {
                  method: "POST",
                  body: formData
              }).then( resp => {
                  resolve({
                      code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
                      data: {
                          /* Updated file metadata after successful save operation */
                          metaData: Object.assign( metaData, {} )
                      }
                  });
              });
          });
      },
      {
          autoSaveFrequency: 0,
          enableFocusPolling: false,
          showSaveButton: true
      }
  );

Kommentare und Anmerkungen zu den Dokumententwürfen werden jetzt auf dem Server gespeichert. Sie können Weitere Informationen zu Rückrufen an deinen Workflow anpassen. Beispiel: Status-Rückrufe Dateikonflikte können vermieden werden, wenn mehrere Personen dasselbe Dokument gleichzeitig überprüfen und kommentieren möchten.

Im letzten Schritt kombinieren Sie alle bearbeiteten Dokumente mithilfe der PDF Services API zu einer PDF-Datei.

Zusammenführen von PDF-Dateien

Der PDF-Kombinationscode entspricht dem PDF-Erstellungscode, verwendet jedoch den Vorgang "Dateien zusammenführen" und fügt jede Datei als Eingabe hinzu.

  function combineFilesToPDF( files, outputFilename, callback ) {
      // Create an ExecutionContext using credentials and create a new operation
  instance.
      const executionContext = PDFToolsSdk.ExecutionContext.create( credentials ),
          combineFilesOperation = PDFToolsSdk.CombineFiles.Operation.createNew();

      // Set operation inputs from source files.
      files.forEach( file => {
          const input = PDFToolsSdk.FileRef.createFromLocalFile( file );
          combineFilesOperation.addInput( input );
      } );

      // Execute the operation and Save the result to the specified location.
      combineFilesOperation.execute( executionContext )
          .then( result => {
              result.saveAsFile( outputFilename );
              callback( outputFilename );
          } );
 }

Die endgültige PDF herunterladen

Fügen Sie einen Endpunkt mit dem Namen /finalize hinzu, der die Funktion aufruft, um alle PDF-Dateien im uploads/drafts in ein Final.pdf -Datei, und lädt sie dann herunter.

  app.get( "/finalize", ( req, res ) => {
      fs.readdir( __dirname + "/uploads/drafts/", ( err, files ) => {
          if( err ) {
              return res.status( 500 ).send( err );
          }
          combineFilesToPDF(
              files.filter( f => f.endsWith( ".pdf" ) ).map( f => __dirname +
  "/uploads/drafts/" + f ),
              __dirname + "/uploads/Final.pdf", ( file ) => {
              res.download( file );
          } );
      } );
  } );

Zum Schluss füge noch einen Link zur Web-Seite "main index.html" zu diesem Endpunkt hinzu. Über diesen Link können Benutzer das Ergebnis des Dokumentarbeitsablaufs herunterladen.

<a href="/finalize">Download final PDF</a>

Nächste Schritte

In diesem Tutorial erfahrt ihr, Acrobat Services APIs integrieren eine Workflow für Dokumentfreigabe und Überprüfung in eine Webanwendung importieren. Mit der Anwendung können Mitarbeiter im Homeoffice Dateien freigeben und im Team zusammenarbeiten. Das ist besonders für Mitarbeiter und Auftragnehmer hilfreich, die von zu Hause aus arbeiten.

Sie können diese Techniken verwenden, um die Zusammenarbeit in Ihrer App zu aktivieren oder PDF Services Node SDK-Beispiele und Beispiele für PDF Embed-API auf GitHub, um sich davon zu inspirieren, wie die APIs der Adobe anderweitig verwendet werden können.

Sind Sie bereit, die Freigabe von Dokumenten und die Überprüfung in Ihrer eigenen App zu aktivieren? Registrieren Sie Ihre Adobe Acrobat Services Entwicklerkonto. Greifen Sie kostenlos auf Adobe PDF Embed zu und testen Sie die anderen APIs sechs Monate lang kostenlos. Nach Ablauf des Testzeitraums kannst du pay as you go für nur $0.05 pro Dokumenttransaktion, wenn Ihr Unternehmen wächst.