Generate and download pdf document in Constellation app : A custom approach

Discussion

baipc

Member since 2012

9 posts

PEGA

Posted: Jul 31, 2024

Last activity: Jul 31, 2024

Posted: 31 Jul 2024 8:08 EDT
Last activity: 31 Jul 2024 8:11 EDT

Generate and download pdf document in Constellation app : A custom approach

This document lists the steps to generate and download pdf.

Steps:

Create an activity to convert html to pdf.

Set generated pdf stream to property.

activity

3. Configure a datapage and point out the activity.

datapage

4. Create a custom dx component and use datapage apis and file-saver package to download the pdf.

Rerences:

FileSaver: https://www.npmjs.com/package/file-saver

Sample gallery: https://github.com/pegasystems/constellation-ui-gallery

Builder: https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/creating-custom-components.html

Sample code

import { saveAs } from "file-saver";
import { Button } from "@pega/cosmos-react-core";

export default function PdfGenerator() {
  const itemClick = () => {
    
    // Call datapage using PCore api
    PCore.getDataPageUtils()
      .getPageDataAsync("D_DownloadPDF", null, {}, { invalidateCache: true })
      .then((response) => {
        // The response of this API is as shown below:
        const pdfStream = response.pyStream;
        const byteCharacters = atob(pdfStream);
        const byteArrays = [];
        for (let i = 0; i < byteCharacters.length; i++) {
          byteArrays.push(byteCharacters.charCodeAt(i));
        }
        
        // Byte array to blob
        const byteArray = new Uint8Array(byteArrays);
        const blob = new Blob([byteArray], { type: "application/pdf" });

        // Save blob as pdf using file-saver library.
        saveAs(blob, "hello.pdf");
      });
  };

  return (
    <Button compact={false} onClick={itemClick}>
      <span>Generate PDF</span>
    </Button>
  );
}

Code explaination:

code