jspdf 分页_使用html2canvas跟jspdf导出导出PDF文件

前言：最近项目中有将html文件导出PDF需求，了解网上有jspdf，whtmltopdf等方法。

由于whtmltopdf需要在服务端安装whtmltopdf，为了简便，选择了js方法。

需要插件：

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script src="{{asset('js/canvas2image.js')}}"></script>

猜到的坑：jspdf导出文件的原理就是使用canvas截取html文档，在把图片插入到PDF文件之中。由于项目中内容偏多，出现了：截取内容不全的问题，分页后文字，图片被截断问题。

解决方法：网上的解决方法有很多，但是对我有效的却不多。

经过多次尝试，终于让我尝试出来一个行之有效的方法，废话不多说，附上代码：

function exportReportTemplet() {
                var element = $("#exportPdf");    // 这个dom元素是要导出pdf的div容器
                var w = element.width() + 30;    // 获得该容器的宽
                var h = element.height() + 30;    // 获得该容器的高
                var offsetTop = element.offset().top;    // 获得该容器到文档顶部的距离
                var offsetLeft = element.offset().left;    // 获得该容器到文档最左的距离
                var canvas = document.createElement("canvas");
                canvas.width = w * 2;    // 将画布宽&&高放大两倍
                canvas.height = h * 2;
                var context = canvas.getContext("2d");
                var scale = 2;//清晰度
                context.scale(2, 2);
                context.translate(-offsetLeft, -offsetTop);

                html2canvas(element, {
                    background: "#FFFFFF",//如果指定的div没有设置背景色会默认成黑色,这里是个坑
                    scale: scale,
                    canvas: canvas,
                    width: w,
                    height: h,
                    useCORS: true,
                    onrendered: function (canvas) {
                        //未生成pdf的html页面高度
                        var leftHeight = canvas.height;

                        var a4Width = 595.28;
                        var a4Height = 841.89;
                        //一页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('x', 'pt', 'a4');
                        var index = 1,
                            canvas1 = document.createElement('canvas'),
                            height;
                        pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');

                        var pdfName = "xx.pdf";//文件名
                        function createImpl(canvas) {
                            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', 0, 0, a4Width, a4Width / canvas1.width * height);
                                leftHeight -= height;
                                position += height;
                                $('.pdfProgress').text(index + 1);
                                $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
                                if (leftHeight > 0) {
                                    setTimeout(createImpl, 500, canvas);
                                } else {
                                    pdf.save(pdfName + '.pdf');
                                    $('.pdfTip').remove();
                                }
                            }
                        }
                        //当内容未超过pdf一页显示的范围，无需分页
                        if (leftHeight < a4HeightRef) {
                            pdf.addImage(pageData, 'JPEG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);
                            pdf.save(pdfName + '.pdf');
                        } else {
                            try {
                                //pdf.deletePage(0);
                                $('.pdfTip').show();
                                $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
                                setTimeout(createImpl, 500, canvas);
                            } catch (err) {
                                console.log(err);
                            }
                        }
                        showloading(false);
                    }

                });
}