实现pdf导出（前端）

关于这excel的pdf导出一问题，正常情况下都会伴随一个点击事件的按钮，为什么？因为你不去点他，让他自己导出吗，用户体验感能好？本内存就小，这倒好，打开一次自动下载并生成一个pdf，就连刷新也是，想想，都有点难以接受。所以自己好，用户好，才是真的好。所以我们excel表实现pdf导出必然和前端有所联系，那前端写什么？刚不是说了吗？不会有人忘了吧。。。当然作者比较宠读者，所以这里再说一次，前端，写按妞哇！！！   说到按钮了，有人直接想到button了吗，但是今天可不用它哦，直接上代码:

<div id='exclepdf'  class="buttoncss"  onclick="tableToPdf()">
	<img src="...."><span>导出</span>
</div>

  css又怎么写呢？它来了

.buttoncss{
	height:35px;
	width:100px;
	text-align:center;
	margin:10px 0px 0px 15px;
	border:1px solid;
	float:right;
	margin-bottom:15px;
}
#excelpdf:hover {
	cursor:pointer;
}
.buttoncss img{
	width:25px;
	padding-top:5px;
	display:inline-block;
}
.buttoncss span{
	display:inline-block;
	padding-left:5px;
	vertical-align:super;
}

 到了这里呢，body的内容就差不多可以了，那这实现了就能导出pdf了吗？不能吧，就好像饭在哪，你不去吃，能不中国人不骗中国人说一句我吃饱了吗？所以这时候我们是不是还缺个过程 ，是不是有了这个过程就可以说吃饱了呢，这是不可以的哦，我们可是高智慧的结晶，要懂得吃饭需用筷子、勺子等等，不然怎么绅士一般的吃饱呢

现在就让我们请出我们的吃饭工具人js文件 ：

<script src="jquery-3.4.1.js"><script>
<script src="jspdf.debug.js"><script>
<script src="html2canvas.min.js"><script>

.接下来就到了不能丢掉的过程了，没了这个，有再好的吃饭工作，你没那过程，又怎会吃饱呢？         

function tableToPdf(){
	html2canvas(
	//这个是后期想要导入的DOM元素的id
		document.getElementById("")	
		{
			dpi:300, //导出pdf清晰度
			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;
				//pdf页面偏移
				var position = 0;
				//html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
				var imgWidth = 595.28;
				var imgHeight = 592.28 / contentWidth * contentHeight;
				var pageDate = canvas.toDataURL('imge/jpeg',1.0);
				var pdf = new jsPDF('','pt','a4');
				//有两个高度需要区分，一个是html页面的实际高度，和生成pdff的页面高度（841.89）
				//当内容未超过pdf一页显示的范围，无需分页
				if(leftHeight < pageHeight){
					pdf.addImage(pageData , 'JPEG' , 0 , 0 , imgWidth , imgHeight);
				}else{
					while(leftHeight > 0){
						pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
						leftHeight -=pageHeight;
						position -= 841.89;
						//避免添加空白页
						if(leftHeight > 0){
							pdf.addPage();
						}
					}
				}
				//设置下载pdf后显示的name名
				pad.save(item.JJInspectionRrecordList[0].WaterIntakeName + item.JJInspectionRrecordList[0].Datetime.substring(0,10).replace(/-/g,'/') + '.pdf');
			},
			//默认是黑色，这里背景设置为白色
			background:'#fff'
		})
}

到这里，一个差不多按钮外加实现点击按钮打印pdf就成功啦，麻烦老爷们觉得可以就点点赞吧！！！！