页面导出成PDF

将页面导出pdf

在课堂评测系统v3版本中有用到,代码如下

		/**
         * 导出PDF
         * @ dom 导入pdf 内容
         */
		toPDF: function (dom) {
			let pdfContentHeight = dom.offsetHeight;
			let pdfContentWith = dom.offsetWith;
			let copyDom = $("<div/>");
			copyDom.addClass('super');
			copyDom.width(pdfContentWith + "px");
			copyDom.height(pdfContentHeight + "px");
			$('body').append(copyDom);

			html2canvas(dom, {
				allowTaint: true,
				height: pdfContentHeight,//给canvas设置高度,
				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 = 50;
					//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
					var imgWidth = 500;
					var imgHeight = 500 / contentWidth * contentHeight;

					var pageData = canvas.toDataURL('image/jpeg', 1.0);

					var pdf = new jsPDF('', 'pt', 'a4');

					//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
					//当内容未超过pdf一页显示的范围,无需分页
					if (leftHeight < pageHeight) {
						pdf.addImage(pageData, 'JPEG', 40, 0, imgWidth, imgHeight);
					} else {
						while (leftHeight > 0) {
							pdf.addImage(pageData, 'JPEG', 40, position, imgWidth, imgHeight)
							leftHeight -= pageHeight;
							position -= 841.89;
							//避免添加空白页
							if (leftHeight > 0) {
								pdf.addPage();
							}
						}
					}
					pdf.save('report_pdf_' + new Date().getTime() + '.pdf');
					//移除dom中添加的元素
					$('.super').remove();

				},
				background: "#fff"
			});

		},
		stuMonthTablePDF: function () {
			let pdfDom = document.querySelector('.pdfContent');
			this.toPDF(pdfDom);


		},
posted @ 2021-04-02 17:17  dzyany  阅读(150)  评论(0编辑  收藏  举报