PDF visual gets cut into lines

[WolfgangZA]

Hi.
When exporting to pdf, my pdf gets cut as in the attached example.

I have tried changing the html params to no avail.

Please any help would be appreciated

<script> /* Edit the following variables to enable/disable PDF generation and set the server URL */ const pdfGeneration = true; const pdfGenerationServerUrl = 'http://support.innovateitsupport.com:3001/'; /* */ if (pdfGeneration && pdfGenerationServerUrl) { document.onclick = function () { if (!document.getElementById('GF_EXPORT_marker')) { return; } let shareModalContent = document.querySelector('div[class*="shareModalContainer"]:has(a[aria-label="Tab Link"]), div[role="dialog"]:has(button[data-testid*="Tab Link"])'); let linkUrlInput = document.querySelector('#link-url-input'); let shareShortenUrl = document.querySelector('#share-shorten-url'); let linkToGrafanaImageRenderer = document.querySelector('a[href="https://grafana.com/grafana/plugins/grafana-image-renderer"]'); if (shareModalContent && linkUrlInput) { if (!shareModalContent.querySelector('.GF_EXPORT_export-pdf-container')) { let div = document.createElement('div'); div.classList.add('GF_EXPORT_export-pdf-container'); if (linkToGrafanaImageRenderer) { div.style.marginTop = '1rem'; } let button = document.createElement('button'); button.setAttribute('disabled', true) button.classList.add('GF_EXPORT_btn-export-pdf'); button.innerHTML = ` <style> .cls-1 { fill: #fff; stroke-width: 0px; } </style>

                        </defs>
                        <g id="Calque_1-2" data-name="Calque 1">
                            <g>
                            <path class="cls-1" d="M79.33,177.77c-16.33,0-32.66.04-48.99-.01-18.5-.06-30.24-11.78-30.28-30.38-.07-32.83-.07-65.66,0-98.48.04-18.66,11.65-30.1,30.38-30.12,27-.03,53.99,0,80.99,0,1.33,0,2.69-.11,3.99.13,3.74.67,6.51,3.19,6.01,6.75-.37,2.61-2.73,5.31-4.88,7.18-1.22,1.06-3.82.71-5.8.71-26.5.04-52.99.02-79.49.03-11.63,0-16.41,4.76-16.42,16.31,0,32.33-.01,64.66,0,96.98,0,11.11,5.01,16.04,16.25,16.04,32.33,0,64.66,0,96.98,0,11.48,0,16.29-4.85,16.3-16.5.02-26.83,0-53.66.01-80.49,0-1.83-.09-3.7.22-5.48.71-4.05,3.48-6.13,7.39-6.03,3.68.1,6.26,2.19,6.85,6.05.25,1.63.2,3.32.2,4.99.01,27,.03,53.99,0,80.99-.02,20.05-11.26,31.33-31.21,31.35-16.16.02-32.33,0-48.49,0Z"/>
                            <path class="cls-1" d="M151.01,14.89c-8.24,0-15.49.02-22.74,0-5.93-.02-9.39-2.66-9.52-7.19-.14-4.72,3.47-7.66,9.6-7.68,14.83-.03,29.66-.02,44.49,0,1.3,0,2.59.16,4.1.26.16,1.32.42,2.44.42,3.56.03,14.66.16,29.33-.12,43.99-.05,2.56-1.2,5.82-3.02,7.4-1.59,1.37-5.37,1.84-7.21.86-2.05-1.09-4.06-4.19-4.21-6.54-.52-7.79-.2-15.64-.2-24.73-1.96,1.77-3.24,2.85-4.42,4.02-20.99,20.96-41.96,41.94-62.94,62.91-1.06,1.06-2.06,2.22-3.27,3.08-3.28,2.33-6.64,2.28-9.52-.57-2.86-2.85-2.89-6.25-.73-9.56.8-1.23,2-2.22,3.05-3.28,20.62-20.63,41.24-41.25,61.85-61.88,1.24-1.25,2.42-2.56,4.37-4.65Z"/>
                            <g>
                                <path class="cls-1" d="M27.04,146.64v-35.56h15.39c3.18,0,5.93.52,8.23,1.55,2.3,1.03,4.08,2.51,5.33,4.45,1.25,1.93,1.88,4.22,1.88,6.86s-.63,4.97-1.88,6.88c-1.25,1.91-3.03,3.4-5.33,4.45-2.3,1.05-5.05,1.57-8.23,1.57h-10.87l3.76-3.71v13.51h-8.28ZM35.32,134.05l-3.76-3.91h10.41c2.51,0,4.4-.54,5.69-1.63,1.29-1.08,1.93-2.61,1.93-4.57s-.64-3.48-1.93-4.55c-1.29-1.07-3.18-1.6-5.69-1.6h-10.41l3.76-3.91v20.17Z"/>
                                <path class="cls-1" d="M64.23,146.64v-35.56h16.15c3.86,0,7.26.74,10.21,2.21,2.95,1.47,5.25,3.54,6.91,6.2,1.66,2.66,2.49,5.78,2.49,9.37s-.83,6.71-2.49,9.37c-1.66,2.66-3.96,4.72-6.91,6.2-2.95,1.47-6.35,2.21-10.21,2.21h-16.15ZM72.51,139.94h7.47c2.37,0,4.43-.45,6.17-1.35,1.74-.9,3.1-2.18,4.06-3.86.96-1.68,1.45-3.63,1.45-5.87s-.48-4.23-1.45-5.89c-.96-1.66-2.32-2.94-4.06-3.83-1.74-.9-3.8-1.35-6.17-1.35h-7.47v22.15Z"/>
                                <path class="cls-1" d="M114.47,146.64h-8.28v-35.56h26.87v6.6h-18.59v28.96ZM113.81,127.09h17.07v6.6h-17.07v-6.6Z"/>
                            </g>
                            </g>
                        </g>
                    </svg>
                    <div class="GF_EXPORT_loader"></div>
                    <span>Export to PDF</span>
                `;
                button.onclick = async function () {
                    button.classList.add('GF_EXPORT_waiting');
                    button.setAttribute('disabled', true);
                    document.getElementById('GF_EXPORT_marker').setAttribute('data-gf-export-waiting', 'true')
                    let url = linkUrlInput.value || window.location.href;

                    const urlObj = new URL(url);
                    url = urlObj.toString();

                    try {
                        console.log('Requesting PDF generation for URL:', url);
                        let completeUrl = pdfGenerationServerUrl + "/generate-pdf";

                        if (pdfGenerationServerUrl.endsWith('/')) {
                            completeUrl = pdfGenerationServerUrl + "generate-pdf";
                        }

                        const response = await fetch(completeUrl, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({url: url})
                        });

                        if (response.ok) {
                            const data = await response.json();
                            const pdfUrl = data.pdfUrl;
                            window.open(pdfUrl, '_blank');
                        } else {
                            const errorText = await response.text();
                            console.error('Response error:', errorText);
                            if (response.status === 500) {
                                alert('Error generating PDF. Please check the server logs for more details.');
                            } else if (response.status === 400) {
                                alert('Request error: Missing or invalid URL.');
                            } else {
                                alert('Unknown error generating PDF.');
                            }
                        }
                    } catch (error) {
                        console.error('Fetch error:', error);
                        if (error.message.includes('Failed to fetch')) {
                            alert('Unable to contact the PDF generation server. Are you sure the Docker is running? Check its status and the configured URL.');
                            checkStatus();
                        } else {
                            alert('Error generating PDF. Please check the console for more details.');
                            checkStatus();
                        }
                    } finally {
                        console.log('PDF generation request completed.')
                        document.getElementById('GF_EXPORT_marker').removeAttribute('data-gf-export-waiting');
                        document.querySelector('.GF_EXPORT_btn-export-pdf').classList.remove('GF_EXPORT_waiting');
                        document.querySelector('.GF_EXPORT_btn-export-pdf').removeAttribute('disabled');
                    }
                };

                let errorDiv = document.createElement('div');
                errorDiv.classList.add('GF_EXPORT_error');
                errorDiv.style.display = 'none';
                let label = document.createElement('label');
                label.innerHTML = 'Export to PDF';
                div.appendChild(label);
                div.appendChild(errorDiv);
                div.appendChild(button);
                shareModalContent.appendChild(div);

                if (document.getElementById('GF_EXPORT_marker').getAttribute('data-gf-export-waiting') === 'true'){
                    document.querySelector('.GF_EXPORT_btn-export-pdf').classList.add('GF_EXPORT_waiting');
                    document.querySelector('.GF_EXPORT_btn-export-pdf').setAttribute('disabled', true);
                } else {
                    checkStatus();
                }
            } else if ( !shareModalContent.querySelector('.GF_EXPORT_btn-export-pdf') || (!shareModalContent.querySelector('.GF_EXPORT_btn-export-pdf').classList.contains('GF_EXPORT_waiting') && !shareModalContent.querySelector('.GF_EXPORT_btn-export-pdf').classList.contains('GF_EXPORT_no-server'))) {
                // If no export process is running, re-listen to the shareShortenUrl checkbox
                if (shareShortenUrl) {
                    shareShortenUrl.addEventListener('change', function () {
                        if (shareShortenUrl.checked) {
                            document.querySelector('.GF_EXPORT_btn-export-pdf').setAttribute('disabled', true);
                            document.querySelector('.GF_EXPORT_btn-export-pdf').classList.add('GF_EXPORT_no-short-url');
                        } else {
                            document.querySelector('.GF_EXPORT_btn-export-pdf').classList.remove('GF_EXPORT_no-short-url');
                            if(document.querySelector('.GF_EXPORT_btn-export-pdf').classList.contains('GF_EXPORT_no-server')) {
                                document.querySelector('.GF_EXPORT_error').style.display = 'block';
                                document.querySelector('.GF_EXPORT_error').innerText = 'PDF generation server is not running.';
                            } else {
                                document.querySelector('.GF_EXPORT_error').style.display = 'none';
                                document.querySelector('.GF_EXPORT_btn-export-pdf').removeAttribute('disabled');
                            }
                        }
                    });

                    if (shareShortenUrl.checked) {
                        document.querySelector('.GF_EXPORT_btn-export-pdf').setAttribute('disabled', true);
                        document.querySelector('.GF_EXPORT_btn-export-pdf').classList.add('GF_EXPORT_no-short-url');
                        document.querySelector('.GF_EXPORT_error').style.display = 'block';
                        document.querySelector('.GF_EXPORT_error').innerText = 'Shortened URL are not supported.';
                    } else {
                        document.querySelector('.GF_EXPORT_btn-export-pdf').classList.remove('GF_EXPORT_no-short-url');
                        if(document.querySelector('.GF_EXPORT_btn-export-pdf').classList.contains('GF_EXPORT_no-server')) {
                            document.querySelector('.GF_EXPORT_error').style.display = 'block';
                            document.querySelector('.GF_EXPORT_error').innerText = 'PDF generation server is not running.';
                        } else {
                            document.querySelector('.GF_EXPORT_error').style.display = 'none';
                            document.querySelector('.GF_EXPORT_btn-export-pdf').removeAttribute('disabled');
                        }
                    }
                }
            }
        } else {
            if (shareModalContent && shareModalContent.querySelector('.GF_EXPORT_export-pdf-container')) {
                shareModalContent.querySelector('.GF_EXPORT_export-pdf-container').remove();
            }
        }
    }
}

function checkStatus() {
    let completeCheckUrl = pdfGenerationServerUrl + "/check-status";
    if (pdfGenerationServerUrl.endsWith('/')) {
        completeCheckUrl = pdfGenerationServerUrl + "check-status";
    }
    fetch(completeCheckUrl)
        .then(response => {
            if (response.ok) {
                console.log('PDF generation server is running.');
                document.querySelector('.GF_EXPORT_btn-export-pdf').removeAttribute('disabled');
            } else {
                console.error('PDF generation server is not running.');
                document.querySelector('.GF_EXPORT_btn-export-pdf').setAttribute('disabled', true);
                document.querySelector('.GF_EXPORT_btn-export-pdf').classList.add('GF_EXPORT_no-server');
                document.querySelector('.GF_EXPORT_error').style.display = 'block';
                document.querySelector('.GF_EXPORT_error').innerText = 'PDF generation server is not running.';
            }
        })
        .catch(error => {
            console.error('PDF generation server is not running.', error);
            document.querySelector('.GF_EXPORT_btn-export-pdf').setAttribute('disabled', true);
            document.querySelector('.GF_EXPORT_btn-export-pdf').classList.add('GF_EXPORT_no-server');
            document.querySelector('.GF_EXPORT_error').style.display = 'block';
            document.querySelector('.GF_EXPORT_error').innerText = 'PDF generation server is not running.';
        });
}

</script> <style> .GF_EXPORT_marker { display: none; } .GF_EXPORT_export-pdf-container { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; padding: 0 24px 24px; } .GF_EXPORT_export-pdf-container button { display: inline-flex; gap: 0.5rem; -webkit-box-align: center; align-items: center; font-size: 14px; font-weight: 500; font-family: Inter, Helvetica, Arial, sans-serif; padding: 0px 15px; height: 32px; line-height: 30px; vertical-align: middle; cursor: pointer; border-radius: 2px; background: rgb(61, 113, 217); color: rgb(255, 255, 255); border: 1px solid transparent; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .GF_EXPORT_export-pdf-container label { font-size: 12px; font-weight: 500; line-height: 12px; margin-bottom: -0.5rem; color: rgb(204, 204, 220); } .GF_EXPORT_export-pdf-container button:hover { background: rgb(90, 134, 222); color: rgb(255, 255, 255); box-shadow: rgba(1, 4, 9, 0.75) 0px 1px 2px; border-color: transparent; } .GF_EXPORT_export-pdf-container button[disabled] { cursor: not-allowed; box-shadow: none; color: rgba(204, 204, 220, 0.6); transition: none 0s ease 0s; background: rgba(204, 204, 220, 0.04); border: 1px solid transparent; } .GF_EXPORT_export-pdf-container button[disabled] svg { opacity: 0.6; } .GF_EXPORT_export-pdf-container button svg { width: 1rem } .GF_EXPORT_loader { display: none; } .GF_EXPORT_export-pdf-container button[disabled].GF_EXPORT_waiting .GF_EXPORT_loader { display: inline-block; } .GF_EXPORT_export-pdf-container button[disabled].GF_EXPORT_no-server .GF_EXPORT_loader, .GF_EXPORT_export-pdf-container button[disabled].GF_EXPORT_no-short-url .GF_EXPORT_loader { display: none; } .GF_EXPORT_error { background-color: #860000; border-left: 2px solid red; padding: 0.5rem 1rem; width: fit-content; } .GF_EXPORT_export-pdf-container button[disabled] svg { display: none; } .GF_EXPORT_export-pdf-container button[disabled].GF_EXPORT_no-server svg, .GF_EXPORT_export-pdf-container button[disabled].GF_EXPORT_no-short-url svg { display: inline-block; } .GF_EXPORT_loader { transform: translate(-50%, -50%); border: 2px solid #717171; border-radius: 50%; border-top: 2px solid #ffffff; width: 1rem; height: 1rem; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @Keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>

[Nizar-Almshantaf]

same for me, were you able to solve this issue ?

[WolfgangZA]

same for me, were you able to solve this issue ?

No Still trying to find out why its doing this. Haven't found a solution yet.

[souravnex]

did someone found any solution to this

[christos-diamantis]

I saw the same behavior after upgrading Grafana 11.2.2 to 11.4.0.
I reverted back to 11.2.5 and it works. Do not know if the 11.3.x versions are also affected.