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

[baipc (Chandra Baipalli)]

This document lists the steps to generate and download pdf.

Steps:

1. Create an activity to convert html to pdf.

2. Set generated pdf stream to property.

3. Configure a datapage and point out the activity.

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: