将HTML页面转为PDF文件并导出
时间：2023-04-05 13:38:57
HTML5
目前，在大多数管理系统中，都会有这样一个功能：根据相关条件查询相应的数据，生成可视化报表，然后导出为PDF文件。本文仅展示生成可视化报表后导出PDF文件的过程。可以使用Echarts、D3js等框架生成可视化报表。1、需要导入的文件为html2canvas.js（根据实际情况选择对应版本）jspdf.min.js（根据实际情况选择对应版本）二、实现思路（1）复制HTML需要在body中生成PDF记住：如果元素中包含ID，则必须重新给定（2）将新元素设置为position:absolute；脱离文档流，因为文档流中被浏览器挡住的部分不会生成PDF。（3）使用html2canvas.js将新元素生成图片（4）使用jspdf.min.js将图片生成PDF文件并保存到本地。3.实现代码(1)HTML代码/*生成PDF的HTML代码*/…………………………
(2)JS代码/*复制元素,注意id*/$("body").append('
……………………………………………… ');/*设置新元素样式*/$("#pdf1").css({"background-color":"#fff","position":"absolute","top":"0px","z-index":"-1","height":$("#pdf").height()});/*html2canvas生成图片，jspdf生成PDF文件*/html2canvas($("#pdf1"),{background:"#fff",allowTaint:true,taintTest:false,onrendered:function(canvas){varcontentWidth=canvas.width;varcontentHeight=canvas.height;varpageHeight=contentWidth/592.28*841.89;varleftHeight=contentHeight;varposition=0;varimgWidth=595.28;varimgHeight=592.28/contentWidth*contentHeight;varpageData=canvas.toDataURL('image/jpeg',1.0);varimg=newImage();;varpdf=newjsPDF('p','pt','a4');img.onload=function(){if(leftHeight
0){pdf.addImage(pageData,'JPEG',0,position,imgWidth,imgHeight)leftHeight-=pageHeight;头寸-=841.89；if(leftHeight>0){pdf.addPage();}}}pdf.save('report_pdf_'+newDate().getTime()+'.pdf');$("#pdf1").删除();}},})以上是作者在项目中的部分核心代码，如有疑问欢迎指正
