Configuration of the javascript library docxtemplater in XPages - xpages

Question

I'm trying to use the library docxtemplater in an XPages application.
Javascript library docxtemplater (https://docxtemplater.com/) use as a
dependency another library opensource jszip-utils.js
(http://stuk.github.io/jszip/) to zip and unzip the docx files.
The problem is that the javascript library jszip-utils.js in XPages is not
working .
I inserted javascript libraries in a folder (jslib) who is under the WebContent folder.
Here's my test page;
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<script src="jslib/main.min.js"></script>
<script src="jslib/angular-expressions.js"></script>
<script src="jslib/jszip.js"></script>
<script src="jslib/jszip-utils.js"></script>
<script src="jslib/FileSaver.min.js"></script>
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[
var loadFile=function(url,callback){
JSZipUtils.getBinaryContent(url,callback);
}
loadFile("tagExample.docx",function(err,content){
doc=new DocxGen(content)
doc.setData( {"first_name":"Hipp",
"last_name":"Edgar",
"phone":"0652455478",
"description":"New Website",
"image":'image.png'
}
) //set the templateVariables
doc.render() //apply them (replace all occurences of {first_name} by Hipp, ...)
out=doc.getZip().generate({type:"blob"}) //Output the document using Data-URI
saveAs(out,"output.docx")
})]]></xp:this.script>
</xp:eventHandler></xp:button>
</xp:view>
Has anyone dealt with the problem?

Answer 1

It is an AMD loader issue. It conflicts with XPage's Dojo.
Use this XSnippet for workaround.
Your code would look like this then:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<!-- temporary redefine define.amd object (Dojo AMD loader) -->
<xp:script clientSide="true" type="text/javascript">
<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}";}]]></xp:this.contents>
</xp:script>
<xp:script src="jslib/jszip.js" clientSide="true"></xp:script>
<xp:script src="jslib/jszip-utils.js" clientSide="true"></xp:script>
...
<!-- restore define.amd object (Dojo AMD loader) -->
<xp:script clientSide="true">
<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}"}]]></xp:this.contents>
</xp:script>
</xp:this.resources>
...

Answer 2

When you look at firebug in your web page, you most likely will see 404 for the JavaScript. You need to either add them as script libraries into xpages and use the xpages script tag with the client attribute or you add them to the web-inf directory and load them using your script tags. You still will need an client side event to trigger them.

Answer 3

Just refer the below java script in your html page.
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>