<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> </head> <style> img{width: 100%;} .box{ width: 592.28px; height: 841.89px; } </style> <body > <div class="box"> <h1>45645asfasdfsdfas</h1> </div> <button id="btn">生成</button> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/html2canvas.min.js"></script> <script src="js/jspdf.umd.min.js"></script> <script> const { jsPDF } = window.jspdf; document.querySelector('#btn').addEventListener('click',function(){ pdf() },false) function pdf () { var poster = document.querySelector('.box') //要生成海报的DIV，最外层的 var width = $(poster).width(); var height = $(poster).height(); var canvas = document.createElement("canvas"); var scale = 2; canvas.width = width * scale; canvas.height = height * scale; canvas.getContext("2d").scale(scale, scale); var opts = { scale: scale, canvas: canvas, width, height: height , backgroundColor:'transparent' }; //生成页面截图 html2canvas(poster,opts) .then(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; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL(); // document.querySelector('#img').src = pageData var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(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.save("content.pdf"); //这个是下载PDF //这个是将PDF转化为bsse64字符串，可以将base64传给后台进行上传到服务器 var data = pdf.output('dataurlstring') console.log(data); }); } </script> </body> </html>
DEMO （源码或者依赖的JS库可以自行通过DEMO页面进行拉取保存）
参考链接：jsPDF仓库地址：https://github.com/MrRio/jsPDF