В этом архиве полный код с библиотеками
А этот код вполне правильный судя по описанию библиотек, но не работает. Поэтому я скинут тестовый проект что бы все максимально наглядней было
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Docxtemplater Image Browser Example</title>
<script src="../build/imagemodule.js"></script>
<script src="../build/pizzip.min.js"></script>
<script src="../build/docxtemplater-latest.min.js"></script>
<script src="../build/FileSaver.min.js"></script>
</head>
<body>
<h2>Генерация DOCX с картинкой 120x180</h2>
<input type="file" id="templateInput" accept=".docx">
<input type="file" id="imageInput" accept="image/*">
<button onclick="generateDocxWithImage()">Скачать docx с фото</button>
<script>
async function generateDocxWithImage() {
const templateFile = document.getElementById('templateInput').files[0];
const imageFile = document.getElementById('imageInput').files[0];
if (!templateFile || !imageFile) {
alert('Выберите шаблон и картинку!');
return;
}
const templateReader = new FileReader();
templateReader.readAsBinaryString(templateFile);
templateReader.onload = function(evt) {
const imageReader = new FileReader();
imageReader.readAsDataURL(imageFile);
imageReader.onloadend = function() {
const photoBase64 = imageReader.result;
const zip = new window.PizZip(evt.target.result);
const imageModule = new window.ImageModule({
centered: true,
getImage: function(tagValue) {
return tagValue.split(',')[1];
},
getSize: function(img, tagValue, tagName) {
return [120, 180];
}
});
const doc = new window.Docxtemplater(zip, {
modules: [imageModule]
});
doc.render({ image: photoBase64 });
const out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
});
window.saveAs(out, 'output.docx');
};
};
}
</script>
</body>
</html>