zoukankan      html  css  js  c++  java
  • 前端导出pdf以及导出内容截断的解决办法

    
    
     $("#downpdf").on("click", function () {
            document.body.scrollTop=document.documentElement.scrollTop=0
            var id='task_report';
                html2canvas($("#"+id), {
                    scale:2,
                    background: "#FFFFFF",//如果指定的div没有设置背景色会默认成黑色,这里是个坑
                    onrendered:function(canvas) {
    
                        //未生成pdf的html页面高度
                        var leftHeight = canvas.height;
    
                        var a4Width = 190
                        var a4Height = 277   //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
                        //一页pdf显示html页面生成的canvas高度;
                        var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);
    
                        //pdf页面偏移
                        var position = 0;
    
                        var pageData = canvas.toDataURL('image/jpeg', 1.0);
    
                        var pdf = new jsPDF('p', 'mm', 'a4');    //A4纸,纵向
                        var index = 1,
                            canvas1 = document.createElement('canvas'),
                            height;
                        pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
    
                        var pdfName='TriButte漏洞管理平台扫描报告';
                        function createImpl(canvas) {
                            console.log(leftHeight,a4HeightRef)
                            if (leftHeight > 0) {
                                index++;
    
                                var checkCount = 0;
                                if (leftHeight > a4HeightRef) {
                                    var i = position + a4HeightRef;
                                    for (i = position + a4HeightRef; i >= position; i--) {
                                        var isWrite = true
                                        for (var j = 0; j < canvas.width; j++) {
                                            var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
    
                                            if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                                                isWrite = false
                                                break
                                            }
                                        }
                                        if (isWrite) {
                                            checkCount++
                                            if (checkCount >= 10) {
                                                break
                                            }
                                        } else {
                                            checkCount = 0
                                        }
                                    }
                                    height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
                                    if(height<=0){
                                        height = a4HeightRef;
                                    }
                                } else {
                                    height = leftHeight;
                                }
    
                                canvas1.width = canvas.width;
                                canvas1.height = height;
    
                                console.log(index, 'height:', height, 'pos', position);
    
                                var ctx = canvas1.getContext('2d');
                                ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);
    
                                var pageHeight = Math.round(a4Width / canvas.width * height);
                                // pdf.setPageSize(null, pageHeight)
                                if(position != 0){
                                    pdf.addPage();
                                }
                                pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4Width, a4Width / canvas1.width * height);
                                leftHeight -= height;
                                position += height;
                                if (leftHeight > 0) {
                                    setTimeout(createImpl, 500, canvas);
                                } else {
                                    pdf.save(pdfName + '.pdf');
                                }
                            }
                        }
    
                        //当内容未超过pdf一页显示的范围,无需分页
                        if (leftHeight < a4HeightRef) {
                            pdf.addImage(pageData, 'JPEG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);
                            pdf.save(pdfName + '.pdf')
                        } else {
                            try {
                                pdf.deletePage(0);
                                setTimeout(createImpl, 500, canvas);
                            } catch (err) {
                                // console.log(err);
                            }
                        }
                    }
                })
        });
    

      

  • 相关阅读:
    python进阶(1)--多进程与多线程概念
    mysql数据库(5)--表的相关操作
    mysql数据库(4)--表删除操作
    备注
    mysql数据库(3)--mysql的执行顺序
    mysql数据库(2)--窗口函数之序号函数
    Spring MVC 返回中文乱码
    郁闷,郁闷啊
    Struts2 下载文件
    js文件加载
  • 原文地址:https://www.cnblogs.com/ellisonzhang/p/12851068.html
Copyright © 2011-2022 走看看