我們在上篇文章說道jspdf是一個簡單實(shí)現(xiàn)網(wǎng)頁內(nèi)容生成pdf的簡單組件，能用來生成各種用途的 PDF 文檔，那么這個組件應(yīng)該如何應(yīng)用呢。

JSPDF的下載地址 http://mozilla.github.io/pdf.js/，這是gitthub的鏈接，里面默認(rèn)帶了一些demo可以供了解JSPDF的基本使用方法。

JSPDF需要在網(wǎng)頁中引入Jquery、JSPDF和html2canvas.js三個文件，html2canvas是用來將網(wǎng)頁畫成所需要的圖片形狀。

下面是我們網(wǎng)頁中使用的代碼，我們的代碼可以實(shí)現(xiàn)點(diǎn)擊來下載PDF文件。

①位置標(biāo)注的是需要點(diǎn)擊那個元素來下載PDF文檔，此處可以任意修改，也可以修改為直接打開非下載方式。

②位置標(biāo)注的是我們將那部分內(nèi)容生成PDF文檔，可以為其中一個元素，也可以為整個頁面，比如填寫為body即可將整個頁面保存為PDF文檔，我們的代碼只是將查詢的證書部分保存為PDF文檔，將頂部的導(dǎo)航和底部的版權(quán)信息去掉，這個地方可以根據(jù)實(shí)際需求進(jìn)行修改。

③位置標(biāo)注處為頁面生成的名稱，即下載文件的默認(rèn)名稱，可以根據(jù)實(shí)際情況進(jìn)行修改。

      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');
                  //有兩個高度需要區(qū)分，一個是html頁面的實(shí)際高度，和生成pdf的頁面高度(841.89)
                  //當(dāng)內(nèi)容未超過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的高度寬度及頁面偏移，也可以根據(jù)自己實(shí)際需求在下載的時候?qū)⑸傻腜DF文檔增加水印或者加蓋公章均可實(shí)現(xiàn)。

JSPDF 是一個基于 HTML5 的客戶端解決方案，用于生成各種用途的 PDF 文檔，使用方法簡單易用，