How to add custom logo (header & footer) while printing a Power BI embedded report?

Question

I have embedded a Power BI report in one of my client applications.They needed print functionality which I have already implemented,And now we have one more request where we need to add Client Logo and some footer to the report which am unable to print along with report as per format shown below.

Since my report is being displayed in IFrame,I just tried to put my logo in a separate div and I then tried to append this IFrame to that div container. And when I try to print I see only the logo and footer getting printed and not the report,Instead in the report section it just shows the Power BI loading icon and not the actual report.

var embedContainer = $('#dashboard-content-hidden')[0];
var report = powerbi.get(embedContainer);

//This is the div where am appending the report,And this div has some sample text and image.

$('#printCont').append(report);

//Alternative way of printing the div-Not working

//printDiv('printCont'); 

// Trigger the print dialog for your browser-This is working just with printing report.

report.print()
    .catch(function (errors) {
    Log.log(errors);
});

Expected result should be like

Logo Here

---

 Power Bi Report Here

---

Disclaimer here

Answer 1

1. The div element you provide as report container can only contain the iframe which holds the embedded report.
2. Calling the report.print() method will only print the embedded report.
3. The report object returned from powerbi.get() is a JS object to interact with the embedded report.

One solution can be to use separate divs for your Logo and Disclaimer and wrap all 3 divs in a parent div.

<div id="print-this">
  <div>
    Logo
  </div>
  <div id="report-container">
  </div>
  <div>
    Disclaimer
  </div>
</div>