整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
近碰到个需求，需要把当前页面生成 pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要 ：）
项目源码地址：https://github.com/linwalker/render-html-to-pdf
我们可以直接在浏览器端使用html2canvas，对整个或局部页面进行“截图”。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。
由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便。
使用
使用的API也很简洁，下面代码可以将某个元素渲染成canvas：
html2canvas(element, {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
}
});
通过onrendered方法，可以将生成的canvas进行回调，比如插入到页面中：
html2canvas(element, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
做个小例子（demo1）代码如下：
这个例子将页面body中的元素渲染成canvas，并插入到body中。
jsPDF库可以用于浏览器端生成PDF。
使用方法如下：
// 默认a4大小，竖直方向，mm单位的PDF
var doc=new jsPDF();
// 添加文本‘Download PDF’
doc.text('Download PDF!', 10, 10);
doc.save('a4.pdf');
// 三个参数，第一个方向，第二个尺寸，第三个尺寸格式
var doc=new jsPDF('landscape','pt',[205, 155])
// 将图片转化为dataUrl
var imageData=‘data:image/png;base64,iVBORw0KGgo...’;
//设置字体大小
doc.setFontSize(20);
//10,20这两参数控制文字距离左边，与上边的距离
doc.text('Stone', 10, 20);
// 0, 40, 控制文字距离左边，与上边的距离
doc.addImage(imageData, 'PNG', 0, 40, 205, 115);
doc.save('a4.pdf')
生成pdf需要把转化的元素添加到jsPDF实例中，也有添加html的功能，但某些元素无法生成在pdf中，因此可以使用html2canvas + jsPDF的方式将页面转成pdf。通过html2canvas将遍历页面元素，并渲染生成canvas，然后将canvas图片格式添加到jsPDF实例，生成pdf。
单页
将demo1的例子修改下：
如果页面内容根据a4比例转化后高度超过a4纸高度呢，生成的pdf会怎么样？会分页吗？
你可以试试，验证一下自己的想法。
jsPDF提供了一个很有用的API， addPage()，我们可以通过 pdf.addPage()，来添加一页pdf，然后通过 pdf.addImage(...)，将图片赋予这页pdf来显示。
那么我们如何确定哪里分页？
这个问题好回答，我们可以设置一个 pageHeight，超过这个高度的内容放入下一页pdf。
来捋一下思路，将html页面内容生成canvas图片，通过 addImage将第一页图片添加到pdf中，超过一页内容，通过 addPage()添加pdf页数,然后再通过 addImage将下一页图片添加到pdf中。
嗯～，很好！巴特，难道没有发现问题吗？
这个方法实现的前提是 — — 我们能根据 pageHeight先将整页内容生成的canvas图片分割成对应的小图片，然后一个萝卜一个坑，一页一页 addImage进去。
What? 想一想我们的canvas是肿么来的，不用拉上去，直接看下面：
html2canvas(document.body, {
onrendered:function(canvas) {
//it is here we handle the canvas
}
})
这里的 body就是要生成canvas的元素对象，一个元素生成一个canvas；那么我们需要一页一页的canvas，也就是说。。。
你觉得可能吗？ 我觉得不太现实，按这思路要获取页面上不同位置的DOM元素，然后通过 htnl2canvas(element,option)来处理，先不说能不能刚好在每个 pageHeight的位置刚好找到一个DOM元素，就算找到了，这样做累不累。
累的话 ：）可以看看下面这种方法。
我提供的思路是我们只生成一个canvas，对就一个，转化元素就是你要转成pdf内容的母元素，在这篇demo里就是 body了；其他不变，也是超过一页内容就 addPage，然后 addImage,只不过这里添加的是同一个canvas。
当然这样做只会出现多页重复的pdf，那到底怎么实现正确分页显示。其实主要利用了jsPDF的两点：
虽然每一页pdf上显示的图片是相同的，但我们通过调整图片的位置，产生了分页的错觉。以第二页为例，将竖直方向上的偏移设置为 -841.89即一张a4纸的高度，又因为超过a4纸高度范围的图片不显示，所以第二页显示了图片竖直方向上[841.89,1682.78]范围内的内容，这就得到了分页的效果，以此类推。
还是看代码吧：
修改imgWidth，并且在addImage时x方向参数设置你要的边距，具体代码如下：
作者：linwalkerhttps://segmentfault.com/a/1190000009211079
里讲一种实现起来比较简单的html转pdf下载的实现。
html2canvas jspdf
通过html2canvas，我们可以将指定的一个dom元素，渲染到canvas中，然后从canva中获得该图片，并将图片通过jspdf来生成。
function createPdf (selector,pagesize,direction,title){
var key=pagesize +''+direction;
var settings={
'00' : {
pdf : {orientation : 'portrait',format : 'a4',unit : 'px'},
width : 448,
height : 632.5
},
'01' : {
pdf : {orientation : 'landscape',format : 'a4',unit : 'px'},
width : 632.5,
height : 448
},
'10' : {
pdf : {orientation : 'portrait',format : 'a3',unit : 'px'},
width : 632.5,
height : 894.2
},
'11' : {
pdf : {orientation : 'landscape',format : 'a3',unit : 'px'},
width : 894.2,
height : 632.5
}
};
var set=settings[key];
var doc=new jsPDF(set.pdf);
var arr=[];//根据顺序保存
var $arr=$(selector);
function tempCreate(){
if($arr.length==0){//没有啦
//执行生成
tempPdf();
}else{
var $dom=$arr.splice(0,1);
html2canvas($dom[0]).then(canvas=> {
var dataurl=canvas.toDataURL('image/png');
arr.push(dataurl);
tempCreate();
});
}
}
function tempPdf(){
arr.forEach((item,i)=>{
if(i !==0){
doc.addPage();
}
doc.addImage(item,'png',-1,-1,set.width,set.height);//根据不同的宽高写入
})
//根据当前的作业名称
doc.save(title+'.pdf');
}
tempCreate();
}需要指定容器(依赖jquery),然后指定纸张A4或 A3，以及横纵向。
//调用
createPdf('.single-page',0,0,'test')当然，如果是数据量很大的话，就不建议在前台生成了，最好还是放在后端去做。个人测试过，做A4的图片生成PDF，当数量大约在100左右的时候，浏览器就崩溃了，如果只是几页的数据的话，这个方式还是很方便的。
Ps：浏览器要是现代浏览器哈。
html2canvas : http://html2canvas.hertzen.com/ jspdf :https://github.com/MrRio/jsPDF
坑给你踩完，可行的结果给你探明，让你的方向明确，存在的小问题自行解决）
前端转PDF，本质就是把网页通过canvas转成图片，图片转成PDF。
坑1：PDF文件占内存很大，本来应该是500kb的pdf，直接给你转出20M的pdf。
坑2：PDF很模糊，文字重影，各种控制画质的参数都无法解决。
坑3：PDF中其实就是一张图片，文字无法复制。
后端转PDF，本质就是用PHP干HTML的事情。
坑1：PHP去写html那种苦，只有苦命人能吃，特别是遇到JS图表等样式，直接生无可恋。
坑2：PHP去干html的事情无法在浏览器上预览，只有写一下导出pdf看效果，一套开发下来，导几百个pdf，这种苦您能吃不？
坑3：还要求你引入字体包等，麻烦死了。
后端调用HTML转PDF，本质就是PHP是识别HTML，再转出来。
坑1：大部分HTML不支持，不支持css文件，不支持js等图表，只能写行内样式。
坑2：写出来的浏览器预览效果和导出来的PDF不一致，试着去调样式，再导出pdf看效果，一套开发下来，导几百个pdf，这种苦您能吃不？
1、准备工作：待转网页、服务器环境。
（1）、待转网页：把你要转出的网页样式，用html、css、js排版出来，不用去在乎兼容性，您能想到的效果都支持。如果您是在网站中弹窗页面预览，网页套在ifram中弹窗即可。
（2）、服务器环境：建议使用傻瓜式维护linux的宝塔，如果您是的linux命令高手也可以不用宝塔。
2、安装wkhtmltopdf：在服务器上安装wkhtmltopdf软件。
安装软件过程中可能会出现各种各样的linux提示报错，因为报错多种多样，我没办法给您一一列举，您根据linux的报错去自行爬文档处理，我这里只给一个我探明可行，可用的思路，你顺着思路走即可。
A、 打开服务器终端。
B、下载wkhtmltopdf复制运行命令：
wget https://github.com/wkhtmltopdf/wkhtmltopdf/releases/download/0.12.5/wkhtmltox-0.12.5-1.centos7.x86_64.rpmC、安装wkhtmltopdf复制运行命令：
sudo yum localinstall -y wkhtmltox-0.12.5-1.centos7.x86_64.rpmD、检测wkhtmltopdf是否安装成功，复制运行命令：
wkhtmltopdf -V3、用PHP创建一个超出的API接口
function PDF()
{
$inputFile='https://baidu.com'; //您要转出的网页路径
$outputFile=ROOT_PATH . 'public/uploads/pdf/xxxx.pdf'; //存放PDF的物理路径
$url='/public/uploads/pdf/xxxx.pdf'; //定义相对路径
$wkhtmltopdfBinary='/usr/local/bin/wkhtmltopdf --margin-top 5mm --margin-bottom 5mm --margin-left 5mm --margin-right 5mm'; //wkhtmltopdf命令的路
$command=$wkhtmltopdfBinary . ' ' . escapeshellarg($inputFile) . ' ' . escapeshellarg($outputFile); //构建命令
exec($command, $output, $returnCode); //执行命令行
//执行失败暴露错误，用于debug
if ($returnCode !==0) {
$obj['output']=$output;
$obj['returnCode']=$returnCode;
return $obj;
};
//执行成功，如果有数据库操作，请在下面写你的数据操作
}
}
4、导出效果
*请认真填写需求信息，我们会在24小时内与您取得联系。
