I am facing some styling issue when I generate and download pdf using jsPDF in blazor.
What I am doing is loading html string coming from DB into iframe then there are two buttons Print and Download to view and download the pdf but unfortunately there are some styling issues and idk how to solve this.

C# Method to Generate PDF. I am sending a Id of IFrame.
private async Task GeneratePdf()
{
    var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/HtmlToPdf.js");
    await module.InvokeVoidAsync("openPdfInPrintDialog", "pdfFrame");
}

Javascript method for generating pdf:
export function generatePdf(iframeId) {
    const iframe = document.getElementById(iframeId);
    const doc = new jspdf.jsPDF({
        orientation: 'landscape',
        unit: 'pt',
        format: 'a4',
        hotfixes: ["px_scaling"]
    });
    doc.setFontSize(18);

    return new Promise((resolve, reject) => {
        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

        doc.html(iframeDocument.body, {
            html2canvas: {
                scale: 0.7
            },
            callback: doc => {
                const output = doc.output("blob");
                resolve(output);
            },
            x: 30,
            y: 30
        });
    });
}

export function openPdfInPrintDialog(iframeId) {
    generatePdf(iframeId).then(blob => {
        const pdfUrl = URL.createObjectURL(blob);

        // Open PDF in a new window
        const pdfWindow = window.open(pdfUrl, '_blank');
        if (pdfWindow) {
            pdfWindow.focus();
        } else {
            console.error('Failed to open PDF window');
        }
    }).catch(error => {
        console.error('Failed to generate PDF:', error);
    });
}

Response I am getting from API as a html string and load into IFrame

When I Download and Print Pdf: