How to make a HTML page as Downloadable PDF

Question

I want to make Something like this: There will be a form and after filling the form and press submit it will go to the preview of the Page with all filled Info. I know how to do all those including the print Button using JS. But I wanted to add a Download button on that page which will download that page As PDF. Is it possible ? If anybody can help me that will be very helpful.

Thanks in advance.

Answer 1

I've been looking at doing this with one of my sites and found this code helpful.

https://codepen.io/AshikNesin/pen/KzgeYX

    var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

Answer 2

Well, I think it is very "simple". You can use some libraries or classes like this:

https://parall.ax/products/jspdf

Example:

Extract div from you current webpage:

// pick you DOM element and extract HTML as String
const html = document.querySelector("#element").innerHTML;

const pdf = new jsPDF('p', 'en', 'letter');
const handlers = {audio: () => false};
const config = {top: 80, bottom: 60, left: 40, width: 522};

pdf.fromHTML(
    html,
    config.left,
    config.top,
    {config.width, handlers},
    (dispose) => pdf.save('example.pdf'),
    config
);