1

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?

user3794653
  • 31
  • 7
  • Code rules. Add the code snippet you used and share where exactly you put these files. Did you try to use them clientside or serverside? Server JS is ES3 and doesn't support `require` – stwissel Oct 10 '16 at 01:00
  • I added the snippet: I add that if I try the snippet of an HTML page in a web server and execute the code works. XPages in the two-jszip utils.js libraries and FileSaver.min.js not work – user3794653 Oct 10 '16 at 08:18
  • I add that if I try the snippet of an HTML page in a web server and execute the code works. While in XPages the two file:szip-utils.js libraries and FileSaver.min.js not work – user3794653 Oct 10 '16 at 08:24
  • 1
    Your example is not a valid XPage. Please, copy it again from XPage's source tab. – Knut Herrmann Oct 10 '16 at 08:52
  • Knut id Right, you need to provide a complete XPage if you expect help – stwissel Oct 10 '16 at 09:52
  • I have updated the code. If you want to send out the javascript libraries – user3794653 Oct 10 '16 at 10:22

3 Answers3

0

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.

stwissel
  • 20,110
  • 6
  • 54
  • 101
0

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>
    ...
Knut Herrmann
  • 30,880
  • 4
  • 31
  • 67
0

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>
Prabhu Manoharan
  • 311
  • 2
  • 10