APEX: PDF-Erzeugung mit jsPDF

Bei Ajaxian bin ich gerade auf eine JavaScript-Bibliothek gestossen, die ohne weitere Hilfsmittel PDF-Dateien erzeugt. Das wollte ich doch gleich mal mit einem APEX-Report ausprobieren.

Zuerst besorgt man sich unter dem Link die 3 Dateien:

• jspdf.js
• sprintf.js
• base64.js

Diese lädt man in seiner APEX-Umgebung bei den „Gemeinsamen Komponenten“ hoch und referenziert sie im Header-Text der entsprechenen Apex-Seite. Wie das geht, habe ich schon mehrfach hier im Blog gezeigt.

Um dynamisch aus dem JavaScript auf die Daten zuzugreifen, legt man einen Anwendungsprozess „MAKE_PDF_PROCESS“ an (OnDemand):

begin
  owa_util.mime_header('text/xml', FALSE);
  htp.p('Cache-Control: no-cache');
  htp.p('Pragma: no-cache');
  owa_util.http_header_close;
  htp.prn('<select>');
  for c in (select empno, ename, job from emp)
  loop
    htp.prn('<option value="' || c.empno || '">' || c.ename || '-' || c.job || '</option>');
  end loop;
  htp.prn('</select>');
end;

Auf der Seite, von der das PDF aufgerufen werden soll, wird nun noch der entsprechende JavaScript-Code eingebunden. Dies kann man ebenfalls im Header-Text der Seite erledigen.

<script type="text/javascript" src="#WORKSPACE_IMAGES#base64.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#sprintf.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jspdf.js"></script>
<script type="text/javascript">  
function demo1() {
  jsPDF.init();
  var get = new htmldb_Get(null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS=MAKE_PDF_PROCESS', 0);
  gReturn = get.get('XML');
  if(gReturn)
  {  
	jsPDF.addPage();
	var l_Count = gReturn.getElementsByTagName("option").length;
	var l_Zeile = 10;
	for(var i=0; i<l_Count;i++)
    {
      var l_Opt_Xml = gReturn.getElementsByTagName("option")[i];
      jsPDF.text(20, i*l_Zeile, l_Opt_Xml.getAttribute('value') + "-" + l_Opt_Xml.firstChild.nodeValue);      
    }
  }	
  get=null;	
  var out = jsPDF.output();
  var url = 'data:application/pdf;base64,' + Base64.encode(out);
  document.location.href = url;
}
</script>

Um das PDF aufzurufen, wird z.B. eine Schaltfläche mit dem „URL-Ziel“ „javascript:demo1();“ angelegt.

Diese Schaltfläche startet die JavaScript-Funktion

Ein Auszug aus dem erzeugten PDF

Um das Ganze in Aktion zu sehen, habe ich eine Seite in meiner Beispielanwendung angelegt, die einen EMP-Report und den Button für das PDF zeigt.

Bisher ist die jsPDF-Bibliothek noch recht einfach und funktioniert nicht mit allen Browser (erfolgreich gestet in Firefox 3.0.9). Mal schauen, was die nächsten Versionen von jsPDF bringen.