网页生成PDF组件jsPDF的使用方法

我们在上篇文章说道jspdf是一个简单实现网页内容生成pdf的简单组件，能用来生成各种用途的 PDF 文档，那么这个组件应该如何应用呢。

JSPDF的下载地址 http://mozilla.github.io/pdf.js/，这是gitthub的链接，里面默认带了一些demo可以供了解JSPDF的基本使用方法。

JSPDF需要在网页中引入Jquery、JSPDF和html2canvas.js三个文件，html2canvas是用来将网页画成所需要的图片形状。

下面是我们网页中使用的代码，我们的代码可以实现点击来下载PDF文件。

①位置标注的是需要点击那个元素来下载PDF文档，此处可以任意修改，也可以修改为直接打开非下载方式。

②位置标注的是我们将那部分内容生成PDF文档，可以为其中一个元素，也可以为整个页面，比如填写为body即可将整个页面保存为PDF文档，我们的代码只是将查询的证书部分保存为PDF文档，将顶部的导航和底部的版权信息去掉，这个地方可以根据实际需求进行修改。

③位置标注处为页面生成的名称，即下载文件的默认名称，可以根据实际情况进行修改。

      var downPdf = document.getElementById("renderPdf");①
      downPdf.onclick = function() {
          html2canvas(document.getElementsByClassName('register-info-content'),② {
              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;
                  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                  var imgWidth = 595.28;
                  var imgHeight = 592.28/contentWidth * contentHeight;
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);
                  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('保存PDF的名称.pdf');③
              }
          })


      }
	

其余地方均有注释作为详解，此版代码可以修改生成pdf的高度宽度及页面偏移，也可以根据自己实际需求在下载的时候将生成的PDF文档增加水印或者加盖公章均可实现。

JSPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档，使用方法简单易用，