Export to PDF directly from portal

Exporting data or web pages to PDF is a powerful feature in Power Pages, especially for use cases like:

Invoices or receipts
Form submissions (application forms, registrations)
Certificates or reports
Print-friendly documentation

Since Power Pages runs in the browser and is part of the Power Platform ecosystem, generating PDFs involves combining JavaScript, HTML templates, and optionally Power Automate or Azure Functions for more advanced cases.

This guide covers:

PDF generation approaches (client-side & server-side)
Step-by-step implementation
Formatting best practices
Security considerations

Approaches for PDF Generation

Approach	Tools Used	When to Use
Client-side	JavaScript (jsPDF, html2canvas)	Light exports (forms, static content)
Server-side	Power Automate, Power Apps, Azure Functions	Complex reports, database exports
Third-party service	PDFShift, PDFCrowd, etc.	Advanced rendering, watermarking

Client-Side PDF Export using jsPDF + html2canvas

Step 1: Add Libraries to Your Page

Go to Power Pages Portal Studio
Open the page or form where you want to enable PDF export
Insert the following in the HTML section or Web Template:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

Step 2: Add the HTML Element to Export

Wrap the content you want to export inside a container:

<div id="pdfContent">
    <h2>Invoice #12345</h2>
    <p>Date: 2025-04-23</p>
    <p>Name: John Doe</p>
    <p>Total: $320.00</p>
</div>

Step 3: Add the Export Button

<button onclick="generatePDF()">Download PDF</button>

Step 4: Write the PDF Script

Add this JavaScript block:

<script>
async function generatePDF() {
    const { jsPDF } = window.jspdf;
    const content = document.getElementById("pdfContent");

    const canvas = await html2canvas(content, { scale: 2 });
    const imgData = canvas.toDataURL("image/png");

    const pdf = new jsPDF({
        orientation: "p",
        unit: "mm",
        format: "a4"
    });

    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

    pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
    pdf.save("document.pdf");
}
</script>

This code converts the selected HTML to an image and embeds it in a downloadable PDF file.

Limitations of Client-Side PDF

Limitation	Notes
May struggle with large content	Better for 1-2 pages of static content
No background images/styles	CSS2/3 limitations
No server-side processing	Cannot pull external data at export time

Server-Side PDF with Power Automate + OneDrive/Word

If you’re working with dynamic data (Dataverse or SharePoint) or need templated documents, use Power Automate:

Step 1: Create a Word Template

Open Word
Design your template using Content Controls (Developer tab)
- Example: <<CustomerName>>, <<TotalAmount>>
Save to OneDrive or SharePoint

Step 2: Build Power Automate Flow

Trigger: When HTTP request is received
Actions:
- Get data from Dataverse or Power Pages form
- Populate Word Template
- Convert Word to PDF
- Return PDF file as response
Enable flow to receive input parameters

Step 3: Call Flow from Power Pages

Use JavaScript fetch or Web API call:

fetch("https://prod-xx.azure-api.net/pdf-flow", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ recordId: "12345" })
})
.then(res => res.blob())
.then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = "report.pdf";
    document.body.appendChild(a);
    a.click();
    a.remove();
});

Bonus: Embed PDF Viewer Instead of Download

Sometimes you may want to preview the PDF before download:

<iframe id="pdfPreview" style="width:100%; height:600px;"></iframe>

// Insert blob into iframe for preview
pdfBlob = await fetch(...).then(res => res.blob());
document.getElementById("pdfPreview").src = URL.createObjectURL(pdfBlob);

Security & Performance Tips

Tip	Why
Sanitize dynamic content	Avoid XSS in PDF
Limit large PDF exports	Especially client-side
Use server-side for complex docs	Better formatting and control
Use HTTPS	Avoid blocked scripts and mixed content
Avoid exposing full record IDs	Secure API endpoints and data access

Use Cases in Real-World Scenarios

Use Case	Method
Certificate generation	Power Automate + Word template
Invoice download	Client-side jsPDF
Report exports	Server-side PDF with dynamic data
Form summary download	html2canvas for HTML capture