Exporting custom bricks visual as pdf

Zen · June 2024

Hi,

I've created a carbon offset infographic using the blank custom brick which is embedded into our customer portal. I wish to allow our customer select the desired month and download the infographic as PDF in proper format (i.e., without month picker).

I used html2pdf module from cdnjs.cloudflare.com but encountered the following error upon clicking the export button: [Report Only] Refused to frame <censored> because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.domo.com sensorflow-org.domo.com".

Anyone knows how do I resolve this issue?

ArborRose · June 2024

Perhaps this might help..

<!DOCTYPE html>
<html>
<head>
  <title>PDF Generation Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
  <!-- Your infographic content here -->
  <div id="infographic">
    <h1>My Carbon Offset Infographic</h1>
    <p>This is where your infographic content goes.</p>
  </div>
  <!-- Button to trigger PDF generation -->
<button id="downloadPDF">Download PDF</button>
  <script>
    document.getElementById('downloadPDF').addEventListener('click', function() {
      // Create a new jsPDF instance
      var doc = new jsPDF();

      // Add your infographic content to the PDF
      var infographicContent = document.getElementById('infographic').innerHTML;
      doc.text(infographicContent, 10, 10);

      // Save the PDF
      doc.save('carbon_offset_infographic.pdf');
    });
  </script>
</body>
</html>

MattTheGuru · June 2024

Also add the cloudflare url to your Custom Apps authorized domains. If you want it to be approved outside of the Domo domain.

Screenshot 2024-06-14 at 10.29.13 AM.png

ArborRose · June 2024

That appears to be a Content Security Policy issue….restricts the resources a web page can load based on domain policy. As if your frame (Domo portal) violates the security by attempting to frame another domain.

ArborRose · June 2024

Perhaps this might help..

<!DOCTYPE html>
<html>
<head>
  <title>PDF Generation Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
  <!-- Your infographic content here -->
  <div id="infographic">
    <h1>My Carbon Offset Infographic</h1>
    <p>This is where your infographic content goes.</p>
  </div>
  <!-- Button to trigger PDF generation -->
<button id="downloadPDF">Download PDF</button>
  <script>
    document.getElementById('downloadPDF').addEventListener('click', function() {
      // Create a new jsPDF instance
      var doc = new jsPDF();

      // Add your infographic content to the PDF
      var infographicContent = document.getElementById('infographic').innerHTML;
      doc.text(infographicContent, 10, 10);

      // Save the PDF
      doc.save('carbon_offset_infographic.pdf');
    });
  </script>
</body>
</html>

MattTheGuru · June 2024

Also add the cloudflare url to your Custom Apps authorized domains. If you want it to be approved outside of the Domo domain.

Domo Everywhere

Domo Everywhere

Exporting custom bricks visual as pdf

Welcome!

Best Answers

Answers

Welcome!

Welcome!

Quick Links

Categories