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.

You can do it using jsPdf. Here is the [link](https://stackoverflow.com/questions/17293135/download-a-div-in-a-html-page-as-pdf-using-javascript) — Gopi, Feb 17 '19 at 16:54
Possible duplicate of [Download a div in a HTML page as pdf using javascript](https://stackoverflow.com/questions/17293135/download-a-div-in-a-html-page-as-pdf-using-javascript) — Weihui Guo, Feb 18 '19 at 00:20

score 0 · Accepted Answer · answered Feb 17 '19 at 16:58

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');
});

Note, when an `` is included within `#content` the resulting PDF renders a black document — guest271314, Feb 17 '19 at 17:03

score 0 · Answer 2 · answered Feb 17 '19 at 17:03

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
);

How to make a HTML page as Downloadable PDF

2 Answers2