Tuto: How to include charts in Report Print Preview

ERPNext Reports
#1

Did you have tried print an beautifull analytics from ERPNext and get disapointed that the print format doesn’t includes the chart?

Your problems are gone, here is the solution for you!

Add the following code on the onload method of your report.js file

frappe.query_report._get_filters_html_for_print = frappe.query_report.get_filters_html_for_print;
frappe.query_report.get_filters_html_for_print = print_settings => {
  const me = frappe.query_report,
        encode = svg => 'data:image/svg+xml;base64,' + btoa((new XMLSerializer()).serializeToString(svg));
  let applied_filters = me._get_filters_html_for_print();

  if (me.chart && me.chart.svg) {
     applied_filters += `<hr><img alt="${__('Chart')}" src="${encode(me.chart.svg)}" />`;
  }

  return applied_filters;

};

And Voilà, cannot be more easy, right?

Note: If you wanna say thanks, pls dont forget to contribute with my research: (Research) ERPNext Adoption and Behavioral Perception of the Community

16 Likes
Ability to Print Reports with Charts and Gantt Chart
Custom Script Report Footer
Frappe Chart Print issue
#2

Great. Thanks.

#3

Thanks a lot for the code.
but why not add this to the core so it will be available for all default reports?

1 Like
#4

Then it would be too easy :slight_smile:

#5

I have already used the code for some custom reports inside my apps but I don’t want to edit erpnext files for that.

#6

It is an open source product.