AngularJs – Dokumente mit Docx Templates erstellen

Tutorial AngularJs

von Ardian Shala, 10.01.2017 - update: 19.05.2017
Mit DocxTemplater lassen sich aus .docx-Vorlagen und Daten einfach Dokumente erstellen.
Vorraussetzung:
  • AngularJs 1.5.x - link
  • DocxTemplater 2.1.3 - link
  • FileSaver JS - link
  • JsZip Utils - link
  • JsZip 2.x (hier wichtig! Version 2) - link

Downloads:

Beispiel

Docx Template anlegen

„template.docx“ Datei erstellen und Platzhalter im Dokument eintragen:
z.B.: Name: {name} Alter: {age}

Dependencies integrieren

<script src="libs/angular.min.js"></script>
<script src="libs/docxtemplater.v2.1.3.min.js"></script>
<script src="libs/FileSaver.min.js"></script>
<script src="libs/jszip-utils.min.js"></script>
<script src="libs/jszip.min.js"></script>

JSZipUtils nutzen um docx zu laden

JSZipUtils.getBinaryContent("template.docx", function(err,template){ ...

Geladenes Template mit Docxgen laden

var doc = new Docxgen().load(template); //Docxgen instaniziieren und Template laden

Daten für Template bereitstellen

doc.setData({
    "name": "Max", // "name" muss als Platzhalter im Template definiert sein!
    "age": 29 // wie bei "name"
}); 

Dokument rendern und speichern

doc.render();  //Render anstossen
var out = doc.getZip().generate({type:"blob"});  //generiert das Dokument
saveAs(out,"output.docx");  //speichert das Dokument
#angularjs #docx #docxtemplater

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien. Full Stack Entwickler mit AngularJs, Angular, Ionic und C#.