Export charts into pdf

0
Hi There,   I have a senario in which I have to export an pdf report which consists of some data and I want to include charts also in that. I tried to convert charts to an image but didn't find proper solution. Jfree charts are not supporting in mendix 10.13.1 version. 
asked
1 answers
0

Hi Abhishek R

 

You use JavaScript action what you need to do is add this code in your JavaScript 

// This file was generated by Mendix Studio Pro.

//

// WARNING: Only the following code will be retained when actions are regenerated:

// - the import list

// - the code between BEGIN USER CODE and END USER CODE

// - the code between BEGIN EXTRA CODE and END EXTRA CODE

// Other code you write will be lost the next time you deploy the project.

import { Big } from "big.js";

import "mx-global";

 

// BEGIN EXTRA CODE

const getFirstWithClass = (className) => {

const element = document.querySelector('.'+ className);

if (!element) {

return;

}

return element.innerHTML;

}

 

const getAllWithClass = (className) => {

const elements = document.querySelectorAll('.'+ className);

if (elements.length === 0) {

return;

}

return [...elements].map(e => '<div>' + e.innerHTML + '</div>').join('');

}

// END EXTRA CODE

 

/**

* JS_PrintClass Javascript action sends one (the first) or all html elements on the screen that have a given identifier class to the print dialogue. From here, the user can decide to send the result to the printer or save the content as a pdf.

* @param {string} className - The className is used to detect wich html elements are targeted and should be sent to the print dialog

* @param {boolean} printsAllOccurances - If printsAllOccurances is set to true, all html elements with the identifier class will be sent to the print dialog. When set to false, the first element will be sent

* @returns {Promise.<boolean>}

*/

export async function JS_Print_PDF(className, printsAllOccurances) {

// BEGIN USER CODE

if (!className || 0 === className.length) {

return;

}

 

const printContents = printsAllOccurances

? getAllWithClass(className)

: getFirstWithClass(className);

 

if (!printContents) {

return false;

}

 

const body = document.body.innerHTML;

 

const frag = new DocumentFragment();

while (document.body.firstChild) {

frag.appendChild(document.body.firstChild);

}

 

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = "";

while (frag.firstChild) {

document.body.appendChild(frag.firstChild);

}

return true;

// END USER CODE

}

and create a nanoflow and Drag and Drop your JavaScript action here and do not forget to add this parameter like this

image.png

then nanoflow do this

image.png

and one more thing wherever you are doing this do not forget to add class into container like this image.png

and better to wrap into one container or it will not look good I hope this will help.

answered