关于前端导出pdf功能，使用html2canvas+jspdf.js（完整功能）

一、首先引入html2canvas.min.js和jspdf.umd.min.js
二、
1.我这边使用的angular.js是最老版本的，如果要引用jspdf的话，需要在controller里面加入$window,其他使用的话就正常使用就好。

app.controller("indexCtr", ["$scope","$location", "pdfServices",'$window', function($scope,$location,services,$window) {}])

三、代码先放

$scope.handleHtml2canvas = function() {
            $scope.outPutPdfFn();
            html2canvas(document.getElementById("pdfContent"), {
                // height: 900,
                // 如果每张图像在绘制前污染了画布，是否测试它们
                taintTest: false,
                backgroundColor: "#ffffff",
                scale: 2, // 添加的scale 参数
                height: $("#pdfContent").outerHeight(),
                onrendered: function(canvas) {
                    var contentWidth = canvas.width;
					var contentHeight = canvas.height;
 
					//一页pdf显示html页面生成的canvas高度;
					var pageHeight = contentWidth / 592.28 * 841.89;
					//未生成pdf的html页面高度
					var leftHeight = contentHeight;
					//页面偏移
					var position = 0;
					//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
					var imgWidth = 595.28;
					var imgHeight = 592.28 / contentWidth * contentHeight;
 
					var pageData = canvas.toDataURL('image/png', 1.0);
					var pdf = new $window.jspdf.jsPDF('', 'pt', 'a4');
 
					//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
					//当内容未超过pdf一页显示的范围，无需分页
					if (leftHeight < pageHeight) {
						pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight);
					} else {
						while (leftHeight > 0) {
							pdf.addImage(pageData, 'PNG', 0, position, imgWidth, imgHeight)
							leftHeight -= pageHeight;
							position -= 841.89;
							//避免添加空白页
							if (leftHeight > 0) {
								pdf.addPage();
							}
						}
                    }
                    pdf.save(`${$scope.paperObj.QuesName}.pdf`);
                }
            })
        }

$scope.outPutPdfFn = function() {
            const A4_WIDTH = 592.28;
            const A4_HEIGHT = 841.89;
            let targert = document.getElementById("pdfContent");
            let pageHeight = targert.scrollWidth / A4_WIDTH* A4_HEIGHT;

            // 获取分割dom
            let lableListID = document.getElementsByClassName("content_body");

            // 进行分割操作，当dom内容已超出a4的高度,则将改dom前插入一个空dom，把他挤下去分割
            for(let i = 0; i< lableListID.length; i++) {
                let multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight);
                if($scope.isSplit(lableListID, i, multiple * pageHeight)) {
                    let divParent = lableListID[i].parentNode; // 获取该div的父节点
                    let newNode = document.createElement('div');
                    newNode.className = 'emptyDiv';
                    newNode.style.background = '#ffffff';
                    let _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight);
                    newNode.style.height = _H  + 'px';
                    newNode.style.width = '100%';
                    let next = lableListID[i].nextSibling; // 获取div的下一个兄弟节点

                    // 判断兄弟节点是否存在
                    if(next) {
                        // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
                        divParent.insertBefore(newNode, next);
                    }else {
                        // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
                        divParent.appendChild(newNode);
                    }
                }else {
                    let currentHeight = targert.offsetHeight;
                    let blankHeight = pageHeight - currentHeight;
                    if(blankHeight > 0) {
                        let divParent = lableListID[i].parentNode; // 获取该div的父节点
                        let newNode = document.createElement('div');
                        newNode.className = 'emptyDiv';
                        newNode.style.background = '#ffffff';
                        newNode.style.height = `${blankHeight}px`;
                    }
                }
            }
        }

$scope.isSplit = function(nodes, index, pageHeight) {
            // 计算当前这块dom是否跨越了a4大小，以此分割
            if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) {
                return true;
            }else {
                return false;
            }
        }