how can auto download window print in javascript

How to Auto Download Window Print in JavaScript#

If you want to allow your users to download a window print automatically, you can do this easily with JavaScript. There are different ways to achieve this, and we will take a look at some of the most popular methods below.

Using window.print() and window.open()#

The first method involves using the built-in window.print() method in JavaScript to open a new window that displays the print preview of the current page. Then, we can use the window.open() method to open a new window and download the print preview as a PDF file.

window.print();
window.open('data:application/pdf,' + encodeURIComponent(document.documentElement.innerHTML));

This code will open the print preview in a new window and prompt the user to download the PDF file.

Using jsPDF and html2canvas Libraries#

The second method involves using the popular jsPDF and html2canvas libraries to generate a PDF file from an HTML element on the page. First, we need to include both libraries in our HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

Then, we can use the following code to generate a PDF file from a specific element on the page:

html2canvas(document.querySelector('#element-to-print')).then(function(canvas) {
    var pdf = new jsPDF('p', 'mm', [canvas.width, canvas.height]);
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, canvas.width, canvas.height);
    pdf.save('download.pdf');
});

In this code, we use the html2canvas() method to capture the contents of the HTML element with the ID "element-to-print". Then, we create a new instance of the jsPDF object and add the captured image as a new page. Finally, we save the PDF file with the name "download.pdf".

Using Print.js Library#

The third method involves using the Print.js library, which simplifies the process of printing and downloading HTML content. First, we need to include the library in our HTML file:

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

Then, we can use the following code to print and download the current page:

printJS({
    printable: 'document',
    type: 'pdf',
    header: 'My Header',
    headerStyle: 'font-size: 16px; font-weight: bold;',
    footer: 'My Footer',
    footerStyle: 'font-size: 12px;',
    onPrintDialogClose: function() {
        console.log('The print dialog was closed');
    }
});

In this code, we use the printJS() method to specify the printable content (in this case, the whole document), the output type (PDF), and the header and footer text. We can also specify a callback function to be executed when the print dialog is closed.

Overall, there are different ways to auto download window print in JavaScript, and you can choose the one that best suits your needs and preferences. Whether you use the built-in window.print() method, the jsPDF and html2canvas libraries, or the Print.js library, you can easily allow your users to download a print preview of your content as a PDF file.