How to download the current webpage in PDF format in LWC?

One of the major challenges with Lightning Experience is working with PDFs.

Here's where some of the popular packages like Conga, PDF Buttler come into the picture.

Agreed that we can get things done using a Visualforce page with a bit of a workaround.

Here am gonna walk you through a simple solution to download the current webpage in PDF Format in LWC.

The beauty of this solution is we will not be using any managed packages or external libraries.

This is going to be a native JavaScript based solution that all the modern browsers understand.

I have a Web Component with a button here which download the page in PDF format.

<template>
  <lightning-button
    label="Download PDF"
    onclick={handlePDF}
  ></lightning-button>
</template>

pdfProcessing.html

Here is the controller file of the Web Component which basically uses a native JavaScript method to print the current complete web page.

This trick is going to print the complete page, however, you were to hide a few elements from printing, check this out.

import { LightningElement } from "lwc";

export default class PdfProcessing extends LightningElement {
	handlePDF(){
    	window.print();
	}
}

pdfProcessing.js

This is going to open the print popup and there we can use the option 'Save As' and save the file to the machine. Simple isn't it?

Hope this helps!