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

17 Likes
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.

7

We get error in the console about too much recursion, so the refactored code could be:

if (!report.__custom_print_override) {
      const original_get_filters_html_for_print = frappe.query_report.get_filters_html_for_print;

      frappe.query_report.get_filters_html_for_print = function(print_settings) {
        let applied_filters = original_get_filters_html_for_print.call(this, print_settings);
        // Check if chart exists and append its SVG to the output
        if (this.chart && this.chart.svg) {
          const encode = svg => 'data:image/svg+xml;base64,' + btoa((new XMLSerializer()).serializeToString(svg));
          applied_filters += `<hr><img alt="${__('Chart')}" src="${encode(this.chart.svg)}" />`;
        }
        return applied_filters;
      };
      // Mark that we've overridden the method to avoid doing it again
      report.__custom_print_override = true;
    }
2 Likes