# html2canvas+jspdf纯前端实现html页面转pdf

1.用到的插件:html2canvas.js和jspdf.debug.js
2.demo:
$("#exportBtn“).on("click",function(){
       var element = $("#basicInfoContainer");

var w = element.outerWidth();

var h = element.outerHeight()+200;

var canvas = document.createElement("canvas");

canvas.width = w;

canvas.height = h;

var context = canvas.getContext("2d");

context.scale(5,5);

html2canvas(element,{

height:h,

onrendered:function(canvas){

var pageData = canvas.toDataURL("image/png",1.0);

var pdf = new jsPDF('','pt',[w*2,h*2]);

pdf.addIamge(pageData,‘png’,0,0,w,h);

pdf.save("pngName");
}
})
})
可以使用html2canvasjspdf来将前端HTML页面换为PDF格式,同时支持CSS3样式。 首先,需要引入html2canvasjspdf的相关库文件。然后,在页面加载完成后,使用html2canvasHTML页面换为canvas,再使用jspdf将canvas导出为PDF格式。 以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML to PDF</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> </head> <body> <div id="content"> <h1>Hello, World!</h1> <p>This is a sample HTML page.</p> </div> <button onclick="generatePDF()">Generate PDF</button> <script> function generatePDF() { html2canvas(document.getElementById('content'), { onrendered: function(canvas) { var pdf = new jsPDF('p', 'mm', 'a4'); pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298); pdf.save('html2pdf.pdf'); } }); } </script> </body> </html> ``` 在上述示例代码中,我们使用了一个包含`id`为`content`的`div`元素作为待换的HTML页面。我们在页面底部添加了一个按钮,当用户点击按钮时,会调用`generatePDF`函数。 在`generatePDF`函数中,我们使用`html2canvas`将`content`元素换为canvas,然后使用`jspdf`将canvas导出为PDF格式并进行下载。 需要注意的是,我们在创建`jspdf`对象时指定了页面大小为A4,如果需要生成其他页面大小的PDF文件,可以修改相关参数。另外,`onrendered`回调函数用于在canvas渲染完成后执行相应的操作,这里使用了该函数来导出PDF文件。 综上所述,以上代码可以将前端HTML页面换为PDF格式,并支持CSS3样式。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值