html页面转成PDF,PDF下载

先说要完成的功能:把填写好的信息转换成PDF文件,并且下载到本地,类似在智联上下载自己的简历,不过下载下来是PDF文件。
参考了网上的多篇博客,发现有两种方法,但两种方法都各有利弊。下边介绍这两种方法。
一、直接把html页面转化成图片,放到了PDF中,并下载到本地,这种方法实验了一下,导出的效果不好,图片不太清楚,好处就是比较简单,只要引入几个js即可实现:
1、需要进入的三个js:
 
  1. <script src="./js/libs/jquery-2.0.2.js"></script>  
  2. <script src="./js/exportpdf/jspdf.debug.js"></script>  
  3. <script src="./js/exportpdf/html2canvas.js"></script> 
2、 html页面:
<button id="topdf" type="button" class="btn btn-success btn-sm " style="margin-left:30px" onclick="downPDF()"><i class="icon-edit"></i>下载PDF</button>
3、 js中需要写的代码
 
/*
 * 下载PDF
 */
function downPDF(){ 
	//要转成PDF的标签的范围。
    html2canvas($('#pdf'), {  
    height:3000,  
    onrendered: function(canvas) {           
        var imgData = canvas.toDataURL('image/png');  
        var doc = new jsPDF('p', 'px','a3');  
        //第一列 左右边距  第二列上下边距  第三列是图片左右拉伸  第四列 图片上下拉伸  
        doc.addImage(imgData, 'PNG', -9, 0,650,1500);  
        doc.addPage();  
        doc.addImage(imgData, 'PNG', -9, -900,650,1500);  
        //test.pdf是下载的pdf的名称
        doc.save('test.pdf');  
    }  
  });  
}
4、 简单的介绍一下代码:
html2canvas 是将当前页面转换成图片;
$('#pdf') 是要转换为图片的页面范围;
height:3000,这个高度要根据页面的大小灵活调整;
var doc = new jsPDF('p', 'px','a3'); p:横向,a3:纸张大小,默认是a4;
doc.addImage(imgData, 'PNG', -9, 0,650,1500);将转换后的图片放到pdf文档上,后面四个参数可根据实际效果灵活调整;
doc.addPage(); 一页pdf显示不完整的时候,新增一页;
  • 0
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值