角度从html弹出窗口生成pdf

时间:2019-01-03 09:52:06

标签: javascript angular jspdf html2canvas html2pdf

我正在构建一个有角度的应用程序,其中我在弹出窗口中显示大约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

0 个答案:

没有答案