Question

我有一个复杂的html派生自word文档，需要转换为pdf。我使用html2canvas将表转换为图像，我已经使用jsPDF的addImage函数将html转换后的图像添加到空pdf。一切正常。但是，在将图像分成多个PDF页面的同时，它在某种意义上不恰当地破坏了一个表格行，其中第1页的边框开始结束，第2页结束，如下图所示。

尝试了一些事情，但它的工作量很大。下面是我的代码。

    var quotes = document.getElementById('totable');
    //! MAKE YOUR PDF
    var pdf = new jsPDF('p', 'pt', 'letter');
    html2canvas(quotes, {
        onrendered: function (canvas) {



            for (var i = 0; i <= quotes.clientHeight / 980; i++) {
                //! This is all just html2canvas stuff
                var srcImg = canvas;
                var sX = 0;
                var sY = 1100 * i; // start 1100 pixels down for every new page
                var sWidth = 900;
                var sHeight = 1100;
                var dX = 0;
                var dY = 0;
                var dWidth = 900;
                var dHeight = 1100;

                window.onePageCanvas = document.createElement("canvas");
                onePageCanvas.setAttribute('width', 900);
                onePageCanvas.setAttribute('height', 1100);
                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));

            }
        }
    })

我也创建了plunker。有任何建议如何正确分割成多个页面？

jsPDF多页PDF - 不恰当地翻页

0 个答案: