Need to download the result as pdf

,
1

I have created a dsp page and I was getting the result in web browser but I need to download that same result as PDF file. In my flowservice I have selected output template as HTML and using this below code.

Review Report function setColorBasedOnResult() { var rows = document.querySelectorAll('table tr'); for (var i = 1; i < rows.length; i++) { // Start from 1 to skip the header row var resultCell = rows[i].cells[1]; // Get the cell containing the result if (resultCell.textContent.trim().toLowerCase() === 'false') { resultCell.style.color = 'red'; } } } 
    // Call the function after the page has loaded
    window.addEventListener('load', setColorBasedOnResult);

    function goBack() {
        window.history.back();
    }

    function downloadPDF() {
        const pdfOptions = {
            margin: 10, // Set the margin of the PDF
            filename: 'review_report.pdf',
            image: { type: 'jpeg', quality: 0.98 }, // Image quality (if images are present)
            html2canvas: { scale: 2 }, // Scale factor for rendering
            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } // PDF format and orientation
        };

        const element = document.querySelector('table'); // Select the table to convert

        // Generate PDF using html2pdf
        html2pdf()
            .from(element)
            .set(pdfOptions)
            .outputPdf()
            .then(pdf => {
                const blob = new Blob([pdf], { type: 'application/pdf' });
                const url = URL.createObjectURL(blob);

                // Create a link to trigger the download
                const a = document.createElement('a');
                a.href = url;
                a.download = 'review_report.pdf';
                a.click();
            });
    }
</script>

Review Report

<table border="1">
    <tr>
        <th>Type</th>
        <th>Result</th>
        <th>Description</th>
    </tr>
    <!-- Loop through the documentList and generate table rows -->
    %loop reviewReport%
        <tr>
            <td>%value type%</td>
            <td>%value result%</td>
            <td>%value description%</td>
        </tr>
    %endloop%
</table>

<button onclick="goBack()">Back</button>
<button onclick="downloadPDF()">Download PDF</button>

By using this above code I was download a pdf but data is empty, but in the webpage I was able to see the result…

2

Hi Lavanya,

looks like the code snippet was not formatted properly by the forum editor.
Additionally I am missing a “” start tag in your code snippet.
This makes it difficult to analyze the code for correctness.

Regards,
Holger

1 Like
3

Hi Holger,

This is this code I am using it contains both html and javascript.

<html>
<head>
    <title>Review Report</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
    <script>
        function setColorBasedOnResult() {
            var rows = document.querySelectorAll('table tr');
            for (var i = 1; i < rows.length; i++) { // Start from 1 to skip the header row
                var resultCell = rows[i].cells[1]; // Get the cell containing the result
                if (resultCell.textContent.trim().toLowerCase() === 'false') {
                    resultCell.style.color = 'red';
                }
            }
        }

        // Call the function after the page has loaded
        window.addEventListener('load', setColorBasedOnResult);

        function goBack() {
            window.history.back();
        }

        function downloadPDF() {
            const pdfOptions = {
                margin: 10, // Set the margin of the PDF
                filename: 'review_report.pdf',
                image: { type: 'jpeg', quality: 0.98 }, // Image quality (if images are present)
                html2canvas: { scale: 2 }, // Scale factor for rendering
                jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } // PDF format and orientation
            };

            const element = document.querySelector('table'); // Select the table to convert

            // Generate PDF using html2pdf
            html2pdf()
                .from(element)
                .set(pdfOptions)
                .outputPdf()
                .then(pdf => {
                    const blob = new Blob([pdf], { type: 'application/pdf' });
                    const url = URL.createObjectURL(blob);

                    // Create a link to trigger the download
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'review_report.pdf';
                    a.click();
                });
        }
    </script>
</head>
<body>
    <h1>Review Report</h1>
    
    <table border="1">
        <tr>
            <th>Type</th>
            <th>Result</th>
            <th>Description</th>
        </tr>
        <!-- Loop through the documentList and generate table rows -->
        %loop reviewReport%
            <tr>
                <td>%value type%</td>
                <td>%value result%</td>
                <td>%value description%</td>
            </tr>
        %endloop%
    </table>

    <button onclick="goBack()">Back</button>
    <button onclick="downloadPDF()">Download PDF</button>
</body>
</html>

Using this code, I was able to download the pdf from web browser but the data is not coming…

4

Hi Lavanya,

code seems to be syntactically complete now.

You might want to check for the resulting HTML-code when this page is rendered to see if the table is formatted correctly behind the scenes.

When I understand you correctly, the page is displayed properly, but when trying to download the pdf, there is some data missing.
Can you provide some screenshots from the rendered page and the downloaded pdf for verification, please?

Regards,
Holger

1 Like
5

Please find attached screenshot.

image
image1027Ă—440 40.9 KB

When I click on download PDF it is downloading but inside the pdf there is no data.

image
image1777Ă—951 23.4 KB

6

Hi Lavanya,

looks like the screenshots were not uploaded correctly.
I cannot see them or access them.

Regards,
Holger

7

For some reason they were between code fences. I fixed that and the screenshots are visible now.

1 Like
8

On the topic, I believe it’s an issue with the javascript library you’re using. Do you see any errors in the browser console?

1 Like
9

Does it show any text when you hit ctrl+A in pdf file? May be its generating it properly but with white text on white background.

10

No, it does not show any text when I hit ctrl+A in pdf file. And also the code I have used is html and javascript both you can see the above code.

11

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.