HTML в PDF, используя HTML Canvas, не могу получить полный контент, вместо этого получая половину его (по вертикали) - PullRequest
Новая
       13

HTML в PDF, используя HTML Canvas, не могу получить полный контент, вместо этого получая половину его (по вертикали)

0 голосов
/ 07 февраля 2020

Попытка конвертировать HTML страницы PDF. хотя это преобразование, не в состоянии сохранить PDF в полном объеме.

Ниже изображение полной страницы HTML. Ссылка на страницу

Original HTML content Page

При преобразовании в формат PDF он сохраняется как на изображении ниже.

Half cropped pdf from HTML page

Мой код выглядит так: 

<script type="text/javascript">
function makePDF() {

    var quotes = document.getElementById('container-fluid');

    html2canvas(quotes, {
        onrendered: function(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; //shif content left/right from the middle
            var sY      = 980*i; // start 980 pixels down for every new page
            var sWidth  = 900; //compresses /expands the width of content
            var sHeight = 980; //compresses /expands the height of content
            var dX      = -500; //padding left
            var dY      = 0; //padding top
            var dWidth  = 900; //content to lef to right
            var dHeight = 980; //content to top to bottom

            window.onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute('width', 980);
            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)); //zoom in zoom out stuff 62/62

        }
        //! after the for loop is finished running, we save the pdf.
        pdf.save('test.pdf');
    }
  });
}
</script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"
    integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

Любая помощь очень ценится ..

...