Print an iframe with Google Datastudio from a parent html

Question

I have a Data studio dashboard embeded and I want to add a function to print the dashboard but it seems that for the CORS restrictions it is not possible to do this

is any work around this ? I found this but it doesn't seem to work print a pdf via iframe (cross domain)

I have this

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
//  window.print();
 $("#printf").get(0).contentWindow.print();



  });
});



</script>
</head>
<body>



<iframe  width="1000" height="400" id="printf" name="printf" src="https://datastudio.google.com/embed/reporting/0B5FF6JBKbNJxQ1hMRzRiVDlobVU/page/jR7H"></iframe>


<button>Print </button>

</body>
</html>

score 1 · Answer 1 · answered Jul 18 '19 at 02:46

The short answer is that this is not possible. The answer you linked to is quite old when it comes to web standards, and that workaround has been closed by Chrome and Firefox. This is for good reason; if you could print a cross-origin iframe easily, than a hacker could embed an iframe with a URL like https://totallynotrealfakebank.com/my-account/tax-info which displays your social security number, capture the content with something like html2canvas, and steal your information.

The easiest workaround is to have users open the embed in a new tab:

<a href="https://datastudio.google.com/embed/reporting/0B5FF6JBKbNJxQ1hMRzRiVDlobVU/page/jR7H" target="_blank">Open Dashboard</a>

Or, if you really wanted a print button, you could use a third-party API that generates a screenshot based on a URL (like https://apiflash.com), or host your own with something like node-webshot. And have the print button prompt for a download of a generated image file, or embed the generated screenshot in a same-origin iframe and use iframe.contentWindow.print().

Hopefully at some point Google Data Studio will let users embed Javascript and/or custom Apps Scripts into dashboards. If they ever do, that would be the best solution, since the code would be running in the same origin.

Print an iframe with Google Datastudio from a parent html

1 Answers1