angular generate pdf from html popup

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I am building an application in angular where I am showing a approx 7 page form in a popup and I want to create pdf for that form in popup. I have tried with the below code but it is creating PDF only for visible section only and rest of the page are blank and also layout in not proper.

        var quotes = document.getElementById('A4');  

    html2canvas(document.querySelector("#A4")).then(canvas => {



    //! MAKE YOUR PDF

    var pdf = new jspdf('p', 'pt', 'letter');



    for (var i = 0; i <= quotes.clientHeight/980; i++) {

        //! This is all just html2canvas stuff

        var srcImg  = canvas;

        var sX      = 0;

        var sY      = 980*i; // start 980 pixels down for every new page

        var sWidth  = 900;

        var sHeight = 980;

        var dX      = 0;

        var dY      = 0;

        var dWidth  = 900;

        var dHeight = 980;



        window.onePageCanvas = document.createElement("canvas");

        onePageCanvas.setAttribute('width', 900);

        onePageCanvas.setAttribute('height', 980);

        var ctx = onePageCanvas.getContext('2d');

        // details on this usage of this function: 

        // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing

        ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);



        // document.body.appendChild(canvas);

        var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);



        var width         = onePageCanvas.width;

        var height        = onePageCanvas.clientHeight;



        //! If we're on anything other than the first page,

        // add another page

        if (i > 0) {

            pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)

        }

        //! now we declare that we're working on that page

        pdf.setPage(i+1);

        //! now we add content to that page!

        pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));



    }

    //! after the for loop is finished running, we save the pdf.

    pdf.save('Test.pdf');



});

enter image description here

edited Jan 3 at 15:27

asked Jan 3 at 9:52

urfusion

4,27843571

add a comment |

        var quotes = document.getElementById('A4');  

    html2canvas(document.querySelector("#A4")).then(canvas => {



    //! MAKE YOUR PDF

    var pdf = new jspdf('p', 'pt', 'letter');



    for (var i = 0; i <= quotes.clientHeight/980; i++) {

        //! This is all just html2canvas stuff

        var srcImg  = canvas;

        var sX      = 0;

        var sY      = 980*i; // start 980 pixels down for every new page

        var sWidth  = 900;

        var sHeight = 980;

        var dX      = 0;

        var dY      = 0;

        var dWidth  = 900;

        var dHeight = 980;



        window.onePageCanvas = document.createElement("canvas");

        onePageCanvas.setAttribute('width', 900);

        onePageCanvas.setAttribute('height', 980);

        var ctx = onePageCanvas.getContext('2d');

        // details on this usage of this function: 

        // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing

        ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);



        // document.body.appendChild(canvas);

        var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);



        var width         = onePageCanvas.width;

        var height        = onePageCanvas.clientHeight;



        //! If we're on anything other than the first page,

        // add another page

        if (i > 0) {

            pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)

        }

        //! now we declare that we're working on that page

        pdf.setPage(i+1);

        //! now we add content to that page!

        pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));



    }

    //! after the for loop is finished running, we save the pdf.

    pdf.save('Test.pdf');



});

enter image description here

edited Jan 3 at 15:27

asked Jan 3 at 9:52

urfusion

4,27843571

add a comment |

        var quotes = document.getElementById('A4');  

    html2canvas(document.querySelector("#A4")).then(canvas => {



    //! MAKE YOUR PDF

    var pdf = new jspdf('p', 'pt', 'letter');



    for (var i = 0; i <= quotes.clientHeight/980; i++) {

        //! This is all just html2canvas stuff

        var srcImg  = canvas;

        var sX      = 0;

        var sY      = 980*i; // start 980 pixels down for every new page

        var sWidth  = 900;

        var sHeight = 980;

        var dX      = 0;

        var dY      = 0;

        var dWidth  = 900;

        var dHeight = 980;



        window.onePageCanvas = document.createElement("canvas");

        onePageCanvas.setAttribute('width', 900);

        onePageCanvas.setAttribute('height', 980);

        var ctx = onePageCanvas.getContext('2d');

        // details on this usage of this function: 

        // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing

        ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);



        // document.body.appendChild(canvas);

        var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);



        var width         = onePageCanvas.width;

        var height        = onePageCanvas.clientHeight;



        //! If we're on anything other than the first page,

        // add another page

        if (i > 0) {

            pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)

        }

        //! now we declare that we're working on that page

        pdf.setPage(i+1);

        //! now we add content to that page!

        pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));



    }

    //! after the for loop is finished running, we save the pdf.

    pdf.save('Test.pdf');



});

enter image description here

edited Jan 3 at 15:27

asked Jan 3 at 9:52

urfusion

4,27843571

        var quotes = document.getElementById('A4');  

    html2canvas(document.querySelector("#A4")).then(canvas => {



    //! MAKE YOUR PDF

    var pdf = new jspdf('p', 'pt', 'letter');



    for (var i = 0; i <= quotes.clientHeight/980; i++) {

        //! This is all just html2canvas stuff

        var srcImg  = canvas;

        var sX      = 0;

        var sY      = 980*i; // start 980 pixels down for every new page

        var sWidth  = 900;

        var sHeight = 980;

        var dX      = 0;

        var dY      = 0;

        var dWidth  = 900;

        var dHeight = 980;



        window.onePageCanvas = document.createElement("canvas");

        onePageCanvas.setAttribute('width', 900);

        onePageCanvas.setAttribute('height', 980);

        var ctx = onePageCanvas.getContext('2d');

        // details on this usage of this function: 

        // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing

        ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);



        // document.body.appendChild(canvas);

        var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);



        var width         = onePageCanvas.width;

        var height        = onePageCanvas.clientHeight;



        //! If we're on anything other than the first page,

        // add another page

        if (i > 0) {

            pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)

        }

        //! now we declare that we're working on that page

        pdf.setPage(i+1);

        //! now we add content to that page!

        pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));



    }

    //! after the for loop is finished running, we save the pdf.

    pdf.save('Test.pdf');



});

enter image description here

javascript angular jspdf html2canvas html2pdf

edited Jan 3 at 15:27

asked Jan 3 at 9:52

urfusion

4,27843571

edited Jan 3 at 15:27

asked Jan 3 at 9:52

urfusion

4,27843571

edited Jan 3 at 15:27

asked Jan 3 at 9:52

urfusion

4,27843571

asked Jan 3 at 9:52

urfusion

4,27843571

asked Jan 3 at 9:52

urfusion

4,27843571

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019842%2fangular-generate-pdf-from-html-popup%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu