Chart as Images into docxtemplater

cachenbach

Hi,

is it possible to render a chart with jsreport, write it into the sampled data object (Base64 encoded) and use it in a second step for docxtemplater (with the Image Module)?

Thanks!!
Christian

jan_blaha

This could work maybe...

Create a separate template rendering chart into image using chrome-image recipe.
Then create a beforeRender script hook attached to the main docxtemplater template. There invoke the rendering of the chart template
https://jsreport.net/learn/scripts#rendering-another-template-from-script
Use the result buffer, convert it to the base64 and pass it to the req.data in the format expected by docxtemplater.

cachenbach

Thank you! This was the solution for my problem. You need the commercial version of docxtemplater, but it works in the online demo.

jamesamurr-bind

@cachenbach which part of the implementation required the commercial version? I think I have this same use case. I'm not apposed to paying for it, but want to know that it is going to work in my case.

jamesamurr-bind

@jan_blaha is there more documentation on the output from the jsreport.render() function? I'm trying to replicate this same use case. From your link above I see there is result.content but I don't know what it is, if it has properties, what format it is, etc. Thanks!

cachenbach

@jamesamurr-bind I required the commercial version of docxtemplate (not jsreport) because of the image module, which is only available in the commercial version: https://docxtemplater.com/demo/#image

jamesamurr-bind

@cachenbach were you able to trial the paid version? Thanks for the response.

cachenbach

@jamesamurr-bind No, I did not try the trial. But I was able to "simulate" the result when I put the Base64 encoded image string into the docxtemplate demo.

jamesamurr-bind

Got it. That makes sense! Thanks.

jamesamurr-bind

@jan_blaha also could you give more info or documentation on how to "pass it to the req.data". I'm having a hard time finding more resources about using scripts to manipulate input data.

jamesamurr-bind

hmmm is it similar to this example? Just modify the config if you want to change the config?

const jsreport = require('jsreport-proxy')
async function beforeRender(req, res) {
  const assets = await jsreport.documentStore.collection('assets').find({name: 'myConfig'})
  const config = JSON.parse(assets[0].content.toString())
  req.data.config = config
}

jamesamurr-bind

That didn't seem to work. Here's what I was trying. Let me know how I should change it.

My docx document has

{myImageData}

in it.

Data:

{
    "myImageData": null
}

My beforeRender script

const jsreport = require('jsreport-proxy')

async function beforeRender(req, res) {
  console.log('starting rendering from script');
  const result = await jsreport.render({ template: { name: 'DoubleDonutTemplate' } });
  contentAsBase64 = Buffer.from(result.content).toString('base64');
  req.data.myImageData = contentAsBase64.toString();
}

This results in {myImageData} in the document to be replaced with undefined. So I can only guess that it's not working the way I expect. How do I set the req.data.myImageData variable correctly from the script? Do I need to invoke my script some way or does it run automatically?

jamesamurr-bind

I figured it out! Turns out you have to select the script to be used by the template :) The above code was correct.

Whoops! Thanks again everyone for your help.