угловая генерация PDF из всплывающего окна HTML - PullRequest
0 голосов
/ 03 января 2019

Я создаю приложение под углом, в котором во всплывающем окне отображается форма размером примерно 7 страниц, и я хочу создать pdf для этой формы во всплывающем окне. Я пробовал с приведенным ниже кодом, но он создает PDF только для видимого раздела, а остальная часть страницы пуста, а также макет в неправильном.

        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 enter image description here

...