Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Using jsPDF in Blazor to download and generate PDF

$
0
0

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 IFrameenter image description here

When I Download and Print Pdf:enter image description here


Viewing all articles
Browse latest Browse all 4839

Trending Articles