How to split pdf into multiple pages in jspdf

Question

0.00/5 (No votes)

See more:

Hi ,
I am trying to capture contents of my div into a pdf using JSPDF.
Not all the contents of my div are coming into the pdf beyond one page .
The div may contain data for more than one pdf .
Below is my code ---

$(document).ready(function () {
        createPDF();
        $('.mydiv').css('display', 'none');

    });
    function createPDF() {
        var
               form = $('.mydiv'),
               cache_width = form.width(),
               a4 = [595.28, 841.89];
        getCanvas().then(function (canvas) {
            var
            img = canvas.toDataURL("image/png"),
            doc = new jsPDF({
                unit: 'px',
                format: 'a4'
                
            });
            doc.addImage(img, 'JPEG', 20, 20);
            doc.save('spmepdf.pdf');
            form.width(cache_width);
            window.location.href = '@Url.Action("Landing")';
        });
    };

    // create canvas object
    function getCanvas() {
        var
               form = $('.mydiv'),
               cache_width = form.width(),
               a4 = [595.28, 841.89];
        debugger
        form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
        return html2canvas(form, {
            imageTimeout: 2000,
            removeContainer: true
        });
    };

What I have tried:

I tried using pagesplit option but no success . PLease help me

Posted 3-Jul-17 9:42am

Abhi1 Kanobi

Updated 27-Aug-17 23:11pm

Add a Solution

Comments

David_Wimbley 3-Jul-17 16:14pm

Do you have a hard requirement of doing this in javascript? It can be easily done using itextsharp is why i ask.

Abhi1 Kanobi 3-Jul-17 16:18pm

For now yes . I need to achieve it using javascript only

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sheila Pontes · Accepted Answer · 2017-07-04T04:15:00

Hi.

For solve this problem, I suggestion that you using the function "fromHTML".

Below there are a code in javascript for print html page.

The code, I found in the github GitHub - MrRio/jsPDF: Client-side JavaScript PDF generation for everyone.

There are many example there that can help you in your task.

I hope it helps.
Regards!
Sheila

JavaScript

function printHtmldiv()
        {
            var pdf = new jsPDF('p', 'pt', 'letter')

            // source can be HTML-formatted string, or a reference
            // to an actual DOM element from which the text will be scraped.
            , source = $('#mydiv')[0]

            // we support special element handlers. Register them with jQuery-style
            // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
            // There is no support for any other type of selectors
            // (class, of compound) at this time.
            , specialElementHandlers = {
                 // element with id of "bypass" - jQuery style selector
                '#bypassme': function(element, renderer)
                {
                    // true = "handled elsewhere, bypass text extraction"
                    return true
                }
            }

            margins = {
                top: 80,
                bottom: 60,
                left: 40,
                width: 522
            };
            // all coords and widths are in jsPDF instance's declared units
            // 'inches' in this case
            pdf.fromHTML
            (
                source // HTML string or DOM elem ref.
              , margins.left // x coord
              , margins.top // y coord
              , {'width': margins.width // max width of content on PDF
                 , 'elementHandlers': specialElementHandlers
                }
              , function (dispose) 
                {
                   // dispose: object with X, Y of the last line add to the PDF
                   // this allow the insertion of new lines after html
                   pdf.save('Mypdf.pdf');
                }
              , margins
            )
        }