根据屏幕尺寸打印时出现JSPDF问题

时间:2020-11-05 05:14:42

标签: javascript pdf jspdf

我正在尝试以pdf格式打印所有可用图形,但问题是当浏览器屏幕尺寸达到90%到最大百分比时,它无法完全打印,甚至无法在下一页上打印。 这是我下面的pdf屏幕截图。请看一个例​​子:

the manual

这是我的网页屏幕截图,它是100%:

enter image description here

在浏览器屏幕尺寸为60%的情况下,它确实以pdf格式打印了两个图形,但模糊了:

enter image description here

pdf输出:

enter image description here

这是我的代码:

generate_pdf: function() {
            alert("ss");
            var form = $('.o_kanban_view'),
            cache_width = form.width(),
            cache_height = form.height(),
            position = 0,
            count = 0,
            a4 = [800, 841.89]; // for a4 size paper width and height
//            a4 = [800, 841.89]; // for a4 size paper width and height
            // create canvas object
            function getCanvas() {
                form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
                return html2canvas(form, {
                    imageTimeout: 2000,
                    removeContainer: true
                });
            }
            function createPDF() {
                getCanvas().then(function (canvas) {
                    var
                     img = canvas.toDataURL("image/png"),
                     pdf = new jsPDF("p", "mm", "a4");
                     var width = pdf.internal.pageSize.width;
                     var height = pdf.internal.pageSize.height;
                     if (cache_width > width) {
                        cache_height = Math.round(cache_height / cache_width *width);
                        cache_width = width;

                     }
                     pdf.addImage(img, 'JPEG', 0, 0, cache_width, cache_height);
                     count = Math.ceil(cache_height) / Math.ceil(height);
                     count = Math.ceil(count);
                     for (var i = 1; i <= count; i++) {
                        position = - height * i
                        alert(position);
                        pdf.addPage(img, 'JPEG', 0, 0, cache_height, cache_width);
                        pdf.addImage(img, 'JPEG', 0, position, cache_height, cache_width);
                    }
                    pdf.save("cart.pdf");
//                     doc = new jsPDF({
//                         unit: 'px',
//                         format: 'letter',
//                         orientation: 'landscape'
//                     });
//                    var title = $('ol.breadcrumb').find('li.active').html();
//                    doc.setFont("helvetica");
//                    doc.setFontType("bold");
//                    doc.setTextColor(0,0,255);
//                    doc.text(title, 20, 30);
//                    doc.addImage(img, 'JPEG', 20, 60);
//                    doc.save('kanban.pdf');
//                    form.width(cache_width);
//                    form.height(cache_height);
                });
            }

            $('body').scrollTop(0);
            createPDF();

        }

我无法解决这个问题。

任何人都可以为此解决方案吗?

0 个答案:

没有答案
相关问题