Adding image in Shape

[Acika00mk]

Thanks a lot for this library,
I am facing a problem when i add an image in a shape
for example we have a square and in the square i add the code for the image. It works but the problem appears when we try to open the document, it says that it find unreadbale content
Word found unreadable content in "report (5).docx". Do you want to recover the contents of this document? If you trust the source of this document, click Yes.

If clicking yes it creates a new file with the content

Details for the implementation :

where the image is added

code for getting the image :

getImage:async url => { const resp = await fetch( url ); const buffer = resp.arrayBuffer ? await resp.arrayBuffer() : await resp.buffer(); return { width: 4.5, height: 4.8, data: buffer, extension: '.jpg' }; }, }

any info for this or trick to do this ?

[jjhbw]

Can you add a minimal docx template file so I can reproduce this?

[Acika00mk]

template.docx
Here it is ,thanks for the ultrafast response

[abbykst]

I've had the same issue any time I add shapes to a template, even when it doesn't have an image.

[jjhbw]

Hmmm weird. When you press 'yes' to recover the file, does it show the document as you expect it to be rendered?

[Acika00mk]

Yes it shows the document ok,
but on the recovery its creating new file without the filename and it needs to be saved again even thow you have downloaded the file.

[Triskell2k1]

I have same issue, but for some shape it's work without any problem and for other it doesn't work (sometimes only moving a shape where it work's correctly to another point in the document do that it doesn't work anymore).
But not sure it's due to docx-templates

[peelmicro]

I had the same issue as well, in my case the problem was that I was putting for the extension 'png' instead of '.png'. Once I put the dot in front of it, it started working.

[antonandreyev]

Interesting finding.
I also got corrupted document because of an image. I've opened it and saved a valid one. Then I've compared valid and invalid document.xml in places where it inserts my image. One of the lines that were different was:
<wp:docPr id="1" name="Picture 1" descr="desc"/>
in invalid one, and
<wp:docPr id="2" name="Picture 1" descr="desc"/>
in valid one.
When I replace this line in original document and open the file - it opens fine. When I replace it back - it becomes broken again.
So it seem to be something with image IDs when inserting them.

[antonandreyev]

I got it, docPr should be unique in whole document. I've found
<wp:docPr id="1" name="Group 1"/>
in the same generated document, in header1.xml. That caused a corruption. This docPr tag was inherited from my original template.

So, the fix would be to parse all docPr ids at the moment of template initialization, remember them and generate image ids considering already taken.

Note, that internet says this error-openning happens not in all versions of Word. For me it happens in latest O365 and SharePoint/Word Online.

[valstu]

Having the same error now. Also have existing images on a template and this is most likely related to that. I was wondering if it would be possible to pass your own custom id to returned image object

  additionalJsContext: {
    qrCode: url => {
      const dataUrl = createQrImage(url, { size: 500 });
      const data = dataUrl.slice('data:image/gif;base64,'.length);
      return { width: 6, height: 6, data, extension: '.gif', imageId: '1234' };
    },
  }

which would be then used in the

<wp:docPr id="1234" name="Group 1" />

[jjhbw]

Should be fixed in v4.6.2. Will be published to NPM shortly.

[matcobat]

Hello,
With v4.6.3, I still have the problem, when we have graphical elements in headers or footers.

[jjhbw]

@matcobat interesting. Can you post a simple repro case? A template and your command invocation is enough. Doesnt have to be a full runnable repository.

[matcobat]

Sure ! Here is a very simple template that is failing. I'm using the method injectSvg() that is in the documentation :
7078ebf0-16fe-68d6-0e45-e78a25feb224.docx

createReport({
template: templateFile,
data: {
},
noSandbox: true,
cmdDelimiter: ['{{', '}}'],
additionalJsContext: {
injectSvg: () => {
const svg_data = Buffer.from(...., 'utf-8');
return { width: 6, height: 6, data: svg_data, extension: '.svg' };
}
}
})

(Just replace the Buffer.from(...) by the one that is in the documentation)

And the generated document :
fail.docx