关于这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就成功啦,麻烦老爷们觉得可以就点点赞吧!!!!