html元素生成pdf 支持自动切割分页

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
// require('../../static/font/simhei-normal')
export default {
    install(Vue, options) {
        Vue.prototype.getPdf = function (elem) {
            document.body.scrollTop = document.documentElement.scrollTop = 0
            let title = this.htmlTitle
            html2Canvas(document.querySelector(elem), {
                // allowTaint: true,
                useCORS: true,
                logging: true,
            }).then(function (canvas) {
                    //未生成pdf的html页面高度
                    let leftHeight = canvas.height;
                    let a4Width = 190
                    let a4Height = 277   //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
                    //一页pdf显示html页面生成的canvas高度;
                    let a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);
                    console.log(a4HeightRef,'a4HeightRef')
                    //pdf页面偏移
                    var position = 0;
                    let pageData = canvas.toDataURL('image/jpeg', 1.0);
                    console.log(pageData, 'pageData')
                    let PDF = new JsPDF('P', 'mm', 'a4'),
                        canvas1 = document.createElement('canvas'),
                        height;
                    PDF.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
                    // PDF.setFont('simhei')
                    PDF.index = 1
                    PDF.index1 = 1
                    function createImpl(canvas) {
                        // PDF.index1++
                        console.log(leftHeight,a4Height,'33333')
                        console.log(PDF.index1++, '3232323232')
                        if (leftHeight > 0) {
                            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);
                                console.log(height,'height234')
                                if (height <= 0) {
                                    height = a4HeightRef;
                                }
                            } else {
                                height = leftHeight;
                            }

                            canvas1.width = canvas.width;
                            canvas1.height = height;

                            console.log( canvas1.height,' canvas1.height')
                            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);
                            if(pageHeight < 277){
                                console.log(1111,'1111')
                                pageHeight = 277
                            }
                            console.log(pageHeight,'pageHeight')
                            if (position != 0) {
                                PDF.addPage();
                            }
                            PDF.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4Width, a4Width / canvas1.width * height);
                            console.log( PDF.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4Width, a4Width / canvas1.width * height))
                            leftHeight -= height;
                            position += height;
                            if (leftHeight > 0) {
                                console.log( canvas1.height,' 老王')
                                PDF.setFontSize(12)
                                // PDF.setFont('simhei')
                                // PDF.text('第' + PDF.index + '页' + ' ' + '共'  + '页', 100, 280,); //print number bottom right
                                // PDF.text( PDF.index , 100, 290,); //print number bottom right
                                PDF.index++
                                setTimeout(createImpl, 500, canvas);
                            } else {
                                console.log(canvas1.height,' 老李')
                                PDF.setFontSize(12)
                                // PDF.setFont('simhei')
                                // PDF.text(PDF.index , 100, 290,); //print number bottom right
                                // PDF.text('第' + PDF.index + '页' + ' ' + '共' + PDF.index + '页', 100, 280,); //print number bottom right
                                PDF.index++
                                PDF.save(title + '.pdf')
                            }
                        }
                    }
                    // console.log(PDF.index1++,'252525')
                    //当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < a4HeightRef) {
                        // console.log(pageHeight,PDF.setPageSize,'222222')
                        PDF.addImage(pageData, 'JPEG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);
                        PDF.save(title + '.pdf')
                    } else {
                        try {
                            PDF.deletePage(0);
                            setTimeout(createImpl, 500, canvas);
                        } catch (err) {
                            // console.log(err);
                        }
                    }
                }
            )
        }
    }
}