Exporting custom bricks visual as pdf

Zen · June 11

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 11

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 14

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 11

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 11

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 14

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

Exporting custom bricks visual as pdf

Best Answers

Answers

Categories