You are currently offline, serving cached version

Get Started (Browser)

Angular, React, Next.JS, Vue

For React, Angular, and Vue, you can use the npm packages and use these code samples from the FAQ:

Browser (JS files)

For usage in the browser without using npm, you can use the .js and .min.js files for docxtemplater on this repository

You will also need Pizzip, which you can download here

You can use the following code :

<html>
    <body>
        <button onclick="generate()">Generate document</button>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.29.4/docxtemplater.js"></script>
    <script src="https://unpkg.com/pizzip@3.1.1/dist/pizzip.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
    <script src="https://unpkg.com/pizzip@3.1.1/dist/pizzip-utils.js"></script>
    <!--
    Mandatory in IE 6, 7, 8 and 9.
    -->
    <!--[if IE]>
        <script
            type="text/javascript"
            src="https://unpkg.com/pizzip@3.1.1/dist/pizzip-utils-ie.js"
        ></script>
    <![endif]-->
    <script>
        function loadFile(url, callback) {
            PizZipUtils.getBinaryContent(url, callback);
        }
        window.generate = function generate() {
            loadFile(
                "https://docxtemplater.com/tag-example.docx",
                function (error, content) {
                    if (error) {
                        throw error;
                    }
                    var zip = new PizZip(content);
                    var doc = new window.docxtemplater(zip, {
                        paragraphLoop: true,
                        linebreaks: true,
                    });

                    // Render the document (Replace {first_name} by John, {last_name} by Doe, ...)
                    doc.render({
                        first_name: "John",
                        last_name: "Doe",
                        phone: "0652455478",
                        description: "New Website",
                    });

                    var out = doc.getZip().generate({
                        type: "blob",
                        mimeType:
                            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
                        // compression: DEFLATE adds a compression step.
                        // For a 50MB output document, expect 500ms additional CPU time
                        compression: "DEFLATE",
                    });
                    // Output the document using Data-URI
                    saveAs(out, "output.docx");
                }
            );
        };
    </script>
</html>

Build the JS Files yourself

If you want to build docxtemplater for the browser yourself, here is how you should do:

git clone https://github.com/open-xml-templating/docxtemplater.git
cd docxtemplater
npm install
npm test
npm run compile
./node_modules/.bin/browserify -r "./js/docxtemplater.js" -s docxtemplater > "browser/docxtemplater.js"
./node_modules/.bin/uglifyjs "browser/docxtemplater.js" > "browser/docxtemplater.min.js" --verbose --ascii-only

Docxtemplater will be exported to window.docxtemplater.

The generated files of docxtemplater will be in /browser (minified and non minified).

Minifying the build

On Browsers that have window.XMLSerializer and window.DOMParser (all browsers normally have it), you can use that as a replacement for the xmldom dependency.

As an example, if you use webpack, you can do the following in your webpack.config.js:

module.exports = {
    // ...
    // ...
    resolve: {
        alias: {
            xmldom: path.resolve(
                "./node_modules/docxtemplater/es6/browser-versions/xmldom.js"
            ),
        },
    },
    // ...
    // ...
};

Loading your template from the filesystem

Please note that if you want to load a docx from your filesystem, you will need a webserver or you will be blocked by CORS policy.

It is also possible to read the docx from a file input , by using the following:

<html>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.29.4/docxtemplater.js"></script>
        <script src="https://unpkg.com/pizzip@3.1.1/dist/pizzip.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
        <script src="https://unpkg.com/pizzip@3.1.1/dist/pizzip-utils.js"></script>
        <!--
Mandatory in IE 6, 7, 8 and 9.
-->
        <!--[if IE]>
            <script
                type="text/javascript"
                src="https://unpkg.com/pizzip@3.1.1/dist/pizzip-utils-ie.js"
            ></script>
        <![endif]-->
        <input type="file" id="doc" />
        <button onclick="generate()">Generate document</button>
        <script>
            var docs = document.getElementById("doc");
            function generate() {
                var reader = new FileReader();
                if (docs.files.length === 0) {
                    alert("No files selected");
                }
                reader.readAsBinaryString(docs.files.item(0));

                reader.onerror = function (evt) {
                    console.log("error reading file", evt);
                    alert("error reading file" + evt);
                };
                reader.onload = function (evt) {
                    const content = evt.target.result;
                    var zip = new PizZip(content);
                    var doc = new window.docxtemplater(zip, {
                        paragraphLoop: true,
                        linebreaks: true,
                    });

                    // Render the document (Replace {first_name} by John, {last_name} by Doe, ...)
                    doc.render({
                        first_name: "John",
                        last_name: "Doe",
                        phone: "0652455478",
                        description: "New Website",
                    });

                    var out = doc.getZip().generate({
                        type: "blob",
                        mimeType:
                            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
                        // compression: DEFLATE adds a compression step.
                        // For a 50MB output document, expect 500ms additional CPU time
                        compression: "DEFLATE",
                    });
                    // Output the document using Data-URI
                    saveAs(out, "output.docx");
                };
            }
        </script>
    </body>
</html>