For React, Angular, and Vue, you can use the npm packages and use these code samples from the FAQ:
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.36.0/docxtemplater.js"></script>
<script src="https://unpkg.com/pizzip@3.1.4/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.4/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.4/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 blob = 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(blob, "output.docx");
}
);
};
</script>
</html>
If you want to build docxtemplater for the browser yourself, run :
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).
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/xmldom": path.resolve(
"./node_modules/docxtemplater/es6/browser-versions/xmldom.js"
),
},
},
// ...
// ...
};
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.36.0/docxtemplater.js"></script>
<script src="https://unpkg.com/pizzip@3.1.4/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.4/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.4/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 blob = 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(blob, "output.docx");
};
}
</script>
</body>
</html>