Skip to main content

Hi Guys,

Can you please suggest how can we print pdf from lwc component?

I tried window.print() which gives whole page, we only want contents from our lwc component. 

 

#LWC Development

#Download Pdf

6 件の回答
  1. 2024年7月17日 12:38

    Hello community! 

    I had similar task and was able to complete it using just lwc! 

     

    For that I had to create the following js method:

     

    handlePrintClick () {

    let printableElement = this.template.querySelector('.print-section');

    if (printableElement) {

    let clone = printableElement.cloneNode(true);

    let printWindow = window.open('', '_blank');

    if (printWindow) {

    printWindow.document.body.appendChild(clone);

    let style = printWindow.document.createElement('style');

    style.textContent = `

    @page {

    size: auto; /* auto is the initial value */

    margin: 0mm; /* this affects the margin in the printer settings */

    }

    @media print {

    body {

    margin: 0;

    padding: 0;

    }

    .no-print {

    display: none;

    }

    }

    `;

    printWindow.document.head.appendChild(style);

    printWindow.focus();

    printWindow.print();

    printWindow.close();

    } else {

    console.error('Failed to open print window');

    }

    } else {

    console.error('Printable element not found');

    }

    }

    and you need to update the content of html with css class to the place which you wanted to print (I had lots of inner data, parent and childs)

     

    <div class="print-section">

    Data which should be printed

    </div>

    Note: In my case I had all css values in the same html file (not a separate css, I used style tag) 

0/9000