This tutorial will guide you step-by-step through setting up the Docxtemplater library in a browser and creating a simple HTML page that runs Docxtemplater.
For beginners, please skip the Angular, React, Next.js, Vue section and jump to the Usage section.
If you are a front-end developer using Angular, React, Next.js, and/or Vue, please check our code samples tutorials just below. This will serve as a good test bed for further developments.
For React, Angular, and Vue, you can use the npm packages and use these code samples from the FAQ:
This example demonstrates how to create a web page with a "Generate document" button that generates your first document when clicked.
your_web_page.html file and add the following code:<html>
<body>
<button onclick="generate()">Generate document</button>
</body>
<!-- Run docxtemplater, pizzip, and filesaver scripts !-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.54.0/docxtemplater.js"></script>
<script src="https://unpkg.com/pizzip@3.1.7/dist/pizzip.js"></script>
<script src="https://unpkg.com/pizzip@3.1.7/dist/pizzip-utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
<!--
Mandatory in IE 6, 7, 8 and 9.
-->
<!--[if IE]>
<script
type="text/javascript"
src="https://unpkg.com/pizzip@3.1.7/dist/pizzip-utils-ie.js"
></script>
<![endif]-->
<script>
function loadFile(url, callback) {
PizZipUtils.getBinaryContent(url, callback);
}
window.generate = function generate() {
loadFile(
// the "template" example hosted by us
"https://docxtemplater.com/input.docx",
function (error, content) {
if (error) {
throw error;
}
const zip = new PizZip(content);
const 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: "+33666666",
description: "The Acme Product",
});
const 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>
Double-click the your_web_page.html file to open it in your browser.
A web page with a "Generate Document" button should appear.
Click the button to download an "output.docx" document.
The "output.docx" document will be populated with the hard-coded data (John and Doe) in the doc.render options of the your_web_page.html file. The template is hosted on our website here and is automatically downloaded by the HTML code.
Well-done, you created your first web page using docxtemplater!
To use your own template in the browser:
Accessing your computer's filesystem directly from HTML code running in the browser is not possible due to security reasons. See CORS policy
Two solutions are possible:
Below is the step-by-step guide for the "read the DOCX from a file input" solution:
Download our template manually here on your computer, or create your own template by placing {placeholders} in a Word document.
Create a blank your_web_page_with_file_input.html file and add the following code:
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.54.0/docxtemplater.js"></script>
<script src="https://unpkg.com/pizzip@3.1.7/dist/pizzip.js"></script>
<script src="https://unpkg.com/pizzip@3.1.7/dist/pizzip-utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
<!--
Mandatory in IE 6, 7, 8 and 9.
-->
<!--[if IE]>
<script
type="text/javascript"
src="https://unpkg.com/pizzip@3.1.7/dist/pizzip-utils-ie.js"
></script>
<![endif]-->
<input type="file" id="doc" />
<button onclick="generate()">Generate document</button>
<script>
const docs = document.getElementById("doc");
window.generate = function generate() {
const 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;
const zip = new PizZip(content);
const 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: "+33666666",
description: "The Acme Product",
});
const 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>
Double-click the "your_web_page_with_file_input.html" file to open it in your browser.
A web page with a "Generate Document" button and a "Choose file" input should appear.
Select the template "input.docx" by clicking on "Choose file" and click "Generate document."
Well-done, you used a personal template, fed it to docxtemplater and got a custom output!
If you want to explore further, you can modify the template "input.docx"
as needed but ensure you update the data accordingly.
For example, if you add a tag {date_of_birth} in "input.docx", add it to the HTML like this:
doc.render({
first_name: "John",
last_name: "Doe",
date_of_birth: "January, 1st 1970",
});
If you prefer alternative methods to include Docxtemplater in your browser, either by using local files or building the JS files yourself, see the sections below.
If you want to use Docxtemplater and Pizzip locally, you can use the .js and .min.js files from this repository
You will also need to download Pizzip, which you can download here
You will then need to adapt your HTML file to point to the local files instead of CDN and unpkg URLs.