Skip to content

D
docxtemplater-image-module
Commit e5ca4c2f by Maxime Richard
Options

Support for PPTX documents 

Images using {%image}
Centered images using {%%image} (per image setting ) or opts.centered = true (global)
Centering tag works with DOCX documents too
parent 109a1c19
Showing with 184 additions and 20 deletions
.gitignore
/*.docx
/*.pptx
test/
js/
node_modules
coverage/
build
.idea/
es6/imgManager.js
......@@ -5,19 +5,38 @@ const extensionRegex = /[^.]+\.([^.]+)/;
module.exports = class ImgManager {
constructor(zip, fileName, xmlDocuments) {
this.fileType = this.getFileType(fileName);
this.fileTypeName = this.getFileTypeName(fileName);
this.relsFilePath = this.getRelsFile(fileName);
this.zip = zip;
this.xmlDocuments = xmlDocuments;
const relsFileName = this.getRelsFile(fileName);
this.relsDoc = xmlDocuments[relsFileName] || this.createEmptyRelsDoc(xmlDocuments, relsFileName);
this.relsDoc = xmlDocuments[this.relsFilePath] || this.createEmptyRelsDoc(xmlDocuments, this.relsFilePath);
}
getRelsFile(fileName) {
let fileParts = fileName.split("/");
fileParts[fileParts.length - 1] = fileParts[fileParts.length - 1] + ".rels";
fileParts = [fileParts[0], "_rels"].concat(fileParts.slice(1));
return fileParts.join("/");
let relsFilePath;
let relsFileName = this.getRelsFileName(fileName);
let fileType = this.getFileType(fileName);
if (fileType == "ppt") {
relsFilePath = "ppt/slides/_rels/" + relsFileName;
} else {
relsFilePath = "word/_rels/" + relsFileName;
}
return relsFilePath;
}
getRelsFileName(fileName) {
return fileName.replace(/^.*?([a-z0-9]+)\.xml$/, "$1") + ".xml.rels";
}
getFileType(fileName) {
return (fileName.indexOf("ppt/slides") === 0) ? "ppt" : "word";
}
getFileTypeName(fileName) {
return (fileName.indexOf("ppt/slides") === 0) ? "presentation" : "document";
}
createEmptyRelsDoc(xmlDocuments, relsFileName) {
const file = this.zip.files["word/_rels/document.xml.rels"];
const file = this.zip.files[relsFileName] || this.zip.files[this.fileType + "/_rels/" + this.fileTypeName + ".xml.rels"];
if (!file) {
return;
}
const content = DocUtils.decodeUtf8(file.asText());
const relsDoc = DocUtils.str2xml(content);
const relationships = relsDoc.getElementsByTagName("Relationships")[0];
......@@ -61,11 +80,11 @@ module.exports = class ImgManager {
i = 0;
}
const realImageName = i === 0 ? imageName : imageName + `(${i})`;
if (this.zip.files[`word/media/${realImageName}`] != null) {
if (this.zip.files[`${this.fileType}/media/${realImageName}`] != null) {
return this.addImageRels(imageName, imageData, i + 1);
}
const image = {
name: `word/media/${realImageName}`,
name: `${this.fileType}/media/${realImageName}`,
data: imageData,
options: {
binary: true,
......@@ -80,7 +99,11 @@ module.exports = class ImgManager {
const maxRid = this.loadImageRels() + 1;
newTag.setAttribute("Id", `rId${maxRid}`);
newTag.setAttribute("Type", "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image");
newTag.setAttribute("Target", `media/${realImageName}`);
if (this.fileType === "ppt") {
newTag.setAttribute("Target", `../media/${realImageName}`)
} else {
newTag.setAttribute("Target", `media/${realImageName}`);
}
relationships.appendChild(newTag);
return maxRid;
}
......
es6/index.js
"use strict";
const DocUtils = require("docxtemplater").DocUtils;
const DOMParser = require("xmldom").DOMParser;
function isNaN(number) {
return !(number === number);
}
......@@ -8,7 +10,29 @@ function isNaN(number) {
const ImgManager = require("./imgManager");
const moduleName = "open-xml-templating/docxtemplater-image-module";
function getInner({part}) {
function getInner({part, left, right, postparsed, index}) {
let xmlString = postparsed.slice(left + 1, right).reduce(function (concat, item) {
return concat + item.value;
}, "");
part.off = {};
part.ext = {};
var xmlDoc = new DOMParser().parseFromString("<xml>" + xmlString + "</xml>");
var off = xmlDoc.getElementsByTagName("a:off");
if (off.length > 0) {
part.off.x = off[0].getAttribute("x");
part.off.y = off[0].getAttribute("y");
}
var ext = xmlDoc.getElementsByTagName("a:ext");
if (ext.length > 0) {
part.ext.cx = ext[0].getAttribute("cx");
part.ext.cy = ext[0].getAttribute("cy");
}
if (part.off.x == null || part.off.y == null || part.ext.cx == null || part.ext.cy == null) {
part.off.x = 0;
part.off.y = 0;
part.ext.cx = 0;
part.ext.cy = 0;
}
return part;
}
......@@ -41,13 +65,21 @@ class ImageModule {
parse(placeHolderContent) {
const module = moduleName;
const type = "placeholder";
if (placeHolderContent[0] === "%") {
return {type, value: placeHolderContent.substr(1), module};
}
if (placeHolderContent.substring(0, 2) === "%%") {
return {type, value: placeHolderContent.substr(2), module, centered: true};
}
if (placeHolderContent.substring(0, 1) === "%") {
return {type, value: placeHolderContent.substr(1), module, centered: false};
}
return null;
}
postparse(parsed) {
const expandTo = this.options.centered ? "w:p" : "w:t";
let expandTo;
if (this.options.fileType == "pptx") {
expandTo = "p:sp";
} else {
expandTo = this.options.centered ? "w:p" : "w:t";
}
return DocUtils.traits.expandToOne(parsed, {moduleName, getInner, expandTo});
}
render(part, options) {
......@@ -73,7 +105,24 @@ class ImageModule {
const rId = this.imgManager.addImageRels(this.getNextImageName(), imgBuffer);
const sizePixel = this.options.getSize(imgBuffer, tagValue, part.value);
const size = [this.convertPixelsToEmus(sizePixel[0]), this.convertPixelsToEmus(sizePixel[1])];
const newText = this.options.centered ? this.getImageXmlCentered(rId, size) : this.getImageXml(rId, size);
let newText;
if (this.options.fileType == "pptx") {
let offset = {x: parseInt(part.off.x, 10), y: parseInt(part.off.y, 10)};
let cellCX = parseInt(part.ext.cx, 10) || 1;
let cellCY = parseInt(part.ext.cy, 10) || 1;
let imgW = parseInt(size[0], 10) || 1;
let imgH = parseInt(size[1], 10) || 1;
if (this.options.centered || part.centered) {
offset.x = offset.x + (cellCX / 2) - (imgW / 2);
offset.y = offset.y + (cellCY / 2) - (imgH / 2);
}
newText = this.getPPTImageXml(rId, [imgW, imgH], offset);
} else {
newText = (this.options.centered || part.centered) ? this.getImageXmlCentered(rId, size) : this.getImageXml(rId, size);
}
return {value: newText};
}
getNextImageName() {
......@@ -192,6 +241,76 @@ class ImageModule {
</w:p>
`.replace(/\t|\n/g, "");
}
getPPTImageXml(rId, size, off) {
if (isNaN(rId)) {
throw new Error("rId is NaN, aborting");
}
return `<p:pic>
<p:nvPicPr>
<p:cNvPr id="6" name="Picture 2"/>
<p:cNvPicPr>
<a:picLocks noChangeAspect="1" noChangeArrowheads="1"/>
</p:cNvPicPr>
<p:nvPr/>
</p:nvPicPr>
<p:blipFill>
<a:blip r:embed="rId${rId}" cstate="print">
<a:extLst>
<a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
<a14:useLocalDpi xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" val="0"/>
</a:ext>
</a:extLst>
</a:blip>
<a:srcRect/>
<a:stretch>
<a:fillRect/>
</a:stretch>
</p:blipFill>
<p:spPr bwMode="auto">
<a:xfrm>
<a:off x="${off.x}" y="${off.y}"/>
<a:ext cx="${size[0]}" cy="${size[1]}"/>
</a:xfrm>
<a:prstGeom prst="rect">
<a:avLst/>
</a:prstGeom>
<a:noFill/>
<a:ln>
<a:noFill/>
</a:ln>
<a:effectLst/>
<a:extLst>
<a:ext uri="{909E8E84-426E-40DD-AFC4-6F175D3DCCD1}">
<a14:hiddenFill xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main">
<a:solidFill>
<a:schemeClr val="accent1"/>
</a:solidFill>
</a14:hiddenFill>
</a:ext>
<a:ext uri="{91240B29-F687-4F45-9708-019B960494DF}">
<a14:hiddenLine xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" w="9525">
<a:solidFill>
<a:schemeClr val="tx1"/>
</a:solidFill>
<a:miter lim="800000"/>
<a:headEnd/>
<a:tailEnd/>
</a14:hiddenLine>
</a:ext>
<a:ext uri="{AF507438-7753-43E0-B8FC-AC1667EBCBE1}">
<a14:hiddenEffects xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main">
<a:effectLst>
<a:outerShdw dist="35921" dir="2700000" algn="ctr" rotWithShape="0">
<a:schemeClr val="bg2"/>
</a:outerShdw>
</a:effectLst>
</a14:hiddenEffects>
</a:ext>
</a:extLst>
</p:spPr>
</p:pic>
`.replace(/\t|\n/g, "");
}
}
module.exports = ImageModule;
es6/test.js
......@@ -20,6 +20,8 @@ const fileNames = [
"expectedLoopCentered.docx",
"withoutRels.docx",
"expectedWithoutRels.docx",
"tagImage.pptx",
"expectedTagImage.pptx"
];
beforeEach(function () {
......@@ -30,12 +32,16 @@ beforeEach(function () {
getSize: function () {
return [150, 150];
},
centered: false,
centered: false
};
this.loadAndRender = function () {
var fileType = (testutils.pptX[this.name]) ? 'pptx' : 'docx';
var file = (fileType == 'pptx') ? testutils.pptX[this.name] : testutils.docX[this.name];
this.doc = new Docxtemplater();
const inputZip = new JSZip(testutils.docX[this.name].loadedContent);
this.doc.setOptions({fileType});
this.opts.fileType = fileType;
const inputZip = new JSZip(file.loadedContent);
this.doc.loadZip(inputZip).setData(this.data);
const imageModule = new ImageModule(this.opts);
this.doc.attachModule(imageModule);
......@@ -51,6 +57,7 @@ function testStart() {
this.name = "imageExample.docx";
this.expectedName = "expectedOneImage.docx";
this.data = {image: "examples/image.png"};
this.fileType = 'docx';
this.loadAndRender();
});
......@@ -90,12 +97,23 @@ function testStart() {
this.data = {image: "examples/image.png"};
this.loadAndRender();
});
it("should work with PPTX documents", function () {
this.name = "tagImage.pptx";
this.expectedName = "expectedTagImage.pptx";
this.data = {image: "examples/image.png"};
this.loadAndRender();
});
});
}
testutils.setExamplesDirectory(path.resolve(__dirname, "..", "examples"));
testutils.setStartFunction(testStart);
fileNames.forEach(function (filename) {
testutils.loadFile(filename, testutils.loadDocx);
if (filename.endsWith('pptx')) {
testutils.loadFile(filename, testutils.loadPptx);
} else {
testutils.loadFile(filename, testutils.loadDocx);
}
});
testutils.start();
package.json
......@@ -33,5 +33,7 @@
},
"author": "Edgar Hipp",
"license": "MIT",
"dependencies": {}
"dependencies": {
"xmldom": "^0.1.27"
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment