PDF-Berichte in Web-GIS-Anwendungen mit React-PDF

 

Die Aufbereitung von PDF-Dokumenten stellt auch in Zeiten von modernen Web-GIS-Anwendungen nach wie vor eine nicht weg zu denkende funktionale Anforderung dar. Im Umfeld von immer mächtigeren Javascript-Libraries und -API’s bietet es sich an, auch die PDF-Generierung clientseitig zu machen. Wir haben in einer Web-Applikation die PDF-Engine React-pdf (react-pdf.org) in Kombination mit Esri’s Javascript API verwendet und bezüglich Funktionalität, Qualität und Flexibilität gute Erfahrungen gemacht. Ein mehrseitiges PDF kann so aufbereitet werden, dass jede Seite individuell ausgerichtet und formatiert wird.

TEstGrafik.png 
return (
    <Document>
      <Page size="A3" orientation="landscape" style={styles.page}>
        <View style={styles.rowHeader}>
          <Image style={styles.logo} src="logo.png" />
          <Text style={styles.headerText} fixed>
            {gemeinde.name}
          </Text>
        </View>
        <View style={styles.largeSection}>
          <View>
            <Image style={styles.image} src={mapImageUrl} />
          </View>
        </View>
        . . .


Charakteristisch für React-pdf ist, dass das Layout komplett in CSS beschrieben werden kann. Dieser Ansatz kann im Vergleich zu anderen Konzepten initial durchaus etwas mehr Aufwand bedeuten. Spätestens aber wenn mit kleinen Formatierungs-Feinheiten der Unterschied gemacht werden kann, ist diese Layouting-Methode funktional im Vorteil.


const styles = StyleSheet.create({
  page: {
    flexDirection: "column",
    backgroundColor: "white",
    padding: 30,
  },
  rowHeader: {
    flex: 1,
  },
  rowBody: {
    flex: 19,
    flexDirection: "row",
  },
  section: {
    paddingTop: 15,
    flex: 2,
  },
  legendWrapper: {
    flex: 2,
  }
 . . .

 

Im Report dargestellte Geoinformationen (Karten und Verschnitt-Resultate) werden aus in ArcGIS Portal gehosteten Feature-Services bezogen und die Karten mit clientseitigen Grafiken (Labels, Highlights) angereichert.
Tabellarisch dargestellte Statistiken werden ebenfalls per AJAX aus dem Layer abgefragt und clientseitig berechnet. Dazu werden HTTP Anfragen vom Client an die Services abgesetzt. Dank der nahtlosen Integration von React-pdf können diese Anfragen einfach und ohne Umwege mit dem notwendigen Payload (Räumlicher Ausschnitt, Bildgrösse, Format, OAuth-Token) versehen werden.

Ein weiterer spannender Aspekt stellt der Umstand dar, dass die Javascript-API von ArcGIS ein clientseitiges Styling der Karte ermöglicht. Der Print-Request enthält darum in unserer Anwendung neben den bekannten Parametern wie Koordinatenausschnitt, Bildgrösse und Format auch die JSON-formatierte Symbolik des Feature-Layers. Damit können auf geschickte Art und Weise clientseitige Informationen in der Karte mit aufbereitet werden.

React-pdf lässt sich optimal in Web-GIS-Lösungen basierend auf ArcGIS Javascript API integrieren und die feinen Unterschiede und Vorteile des clientseitigen Renderings ermöglichen zufriedenstellende Funktionen und Resultate.

 
Oliver Grimm