Getting Docxtemplater is not defined in JS in the browser

I am trying to make a website with which I can change the words in my template. I uploaded the docx.docx file to my folder where all the files are located like a index.html. There are 3 labels in my file : {number} , {second_name} , number. And I use Docxtemplater library and JSZip. So here is an example of my code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <form class="main__form">
        <label for="name">Name</label>
        <input type="text" id="name">
        <br>
        <label for="second_name">Second</label>
        <input type="text" id="second_name">
        <br>
        <label for="number">Number</label>
        <input type="text" id="number">
        <br>
        <button type="button" id="generate">GO</button>
    </form>

    <script src="https://cdn.jsdelivr.net/npm/jszip@3.7.1/dist/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.37.2/docxtemplater.js"></script>
    <script>
        document.getElementById('generate').addEventListener('click', function () {

            let nameValue = document.getElementById('name').value;
            let second_nameValue = document.getElementById('second_name').value;
            let numberValue = document.getElementById('number').value;

            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'docx.docx', true);
            xhr.responseType = 'arraybuffer';

            xhr.onload = function () {
                const zip = new JSZip();
                const content = xhr.response;
                const template = new Docxtemplater();
                zip.loadAsync(content).then(function (zip) {
                    const doc = zip.file('word/document.xml').asText();
                    template.loadXml(doc);
                    template.setData({
                        name: nameValue,
                        second_name: second_nameValue,
                        number: numberValue,
                    });
                    template.render();
                    const updatedDoc = template.getZip().generate({
                        type: 'blob'
                    });

                    const downloadLink = document.createElement('a');
                    downloadLink.href = URL.createObjectURL(updatedDoc);
                    downloadLink.download = 'result.docx';
                    document.body.appendChild(downloadLink);
                    downloadLink.click();
                });
            };

            xhr.send();
        });
    </script>
</body>

</html>

when I click on the "GO" button, the message appears in the console :

"Uncaught ReferenceError: Docxtemplater is not defined onload http://127.0.0.1:5500/index.html:42 EventHandlerNonNull* http://127.0.0.1:5500/index.html:39 EventListener.handleEvent* http://127.0.0.1:5500/index.html:29"

I can not understand what is wrong. I think that the link is correct. I tried to find the correct link on the site cdnjs, but it is not work too

Solution

You have to instantiate your Docxtemplater object like this:

const template = new window.docxtemplater();

Be aware, that the constructor without arguments will be removed in Docxtemplater version 4.

Look here for more information on how to use the Docxtemplater library in the browser: https://docxtemplater.com/docs/get-started-browser/#browser-js-files