作者：grain先森
鏈接：https://www.jianshu.com/p/4a550e07d50b

1. html2canvas

簡(jiǎn)介
我們可以直接在瀏覽器端使用html2canvas，對(duì)整個(gè)或局部頁(yè)面進(jìn)行“截圖”。但這并不是真的截圖，而是通過(guò)遍歷頁(yè)面DOM結(jié)構(gòu)，收集所有元素信息及相應(yīng)樣式，渲染出canvas image。

由于html2canvas只能將它能處理的生成canvas image，因此渲染出來(lái)的結(jié)果并不是100%與原來(lái)一致。但它不需要服務(wù)器參與，整個(gè)圖片都由客戶端瀏覽器生成，使用很方便。

使用
使用的API也很簡(jiǎn)潔，下面代碼可以將某個(gè)元素渲染成canvas：

html2canvas(element, {    onrendered: function(canvas) {        // canvas is the final rendered     }});

通過(guò)onrendered方法，可以將生成的canvas進(jìn)行回調(diào)，比如插入到頁(yè)面中：

html2canvas(element, {    onrendered: function(canvas) {       document.body.appendChild(canvas);    }});

做個(gè)小例子（demo1）代碼如下：

      html2canvas example                                    one          ...        
      
    
                  it is a title        Stone Giant        ...     
                      Stone Giant        Coming ...         以一團(tuán)石頭...      
    
    write by linwalker @2017

這個(gè)例子將頁(yè)面body中的元素渲染成canvas，并插入到body中。

2. jsPDF

jsPDF庫(kù)可以用于瀏覽器端生成PDF。

文字生成PDF

使用方法如下：

// 默認(rèn)a4大小，豎直方向，mm單位的PDFvar doc = new jsPDF();// 添加文本‘Download PDF’doc.text('Download PDF!', 10, 10);doc.save('a4.pdf');

圖片生成PDF
使用方法如下：

// 三個(gè)參數(shù)，第一個(gè)方向，第二個(gè)單位，第三個(gè)尺寸格式var doc = new jsPDF('landscape','pt',[205, 115])// 將圖片轉(zhuǎn)化為dataUrlvar imageData = ‘data:image/png;base64,iVBORw0KGgo...’;doc.addImage(imageData, 'PNG', 0, 0, 205, 115);doc.save('a4.pdf');

文字與圖片生成PDF

// 三個(gè)參數(shù)，第一個(gè)方向，第二個(gè)尺寸，第三個(gè)尺寸格式var doc = new jsPDF('landscape','pt',[205, 155])// 將圖片轉(zhuǎn)化為dataUrlvar imageData = ‘data:image/png;base64,iVBORw0KGgo...’;//設(shè)置字體大小doc.setFontSize(20);//10,20這兩參數(shù)控制文字距離左邊，與上邊的距離doc.text('Stone',?10,?20);//?0,?40,?控制文字距離左邊，與上邊的距離doc.addImage(imageData, 'PNG', 0, 40, 205, 115);doc.save('a4.pdf')

生成pdf需要把轉(zhuǎn)化的元素添加到j(luò)sPDF實(shí)例中，也有添加html的功能，但某些元素?zé)o法生成在pdf中，因此可以使用html2canvas + jsPDF的方式將頁(yè)面轉(zhuǎn)成pdf。

通過(guò)html2canvas將遍歷頁(yè)面元素，并渲染生成canvas，然后將canvas圖片格式添加到j(luò)sPDF實(shí)例，生成pdf。

3. html2canvas + jsPDF

單頁(yè)
將demo1的例子修改下：

<script type="text/javascript" src="./js/jsPdf.debug.js">script><script type="text/javascript">      var downPdf = document.getElementById("renderPdf");      downPdf.onclick = function() {          html2canvas(document.body, {              onrendered:function(canvas) {                  //返回圖片dataURL，參數(shù)：圖片格式和清晰度(0-1)                  var pageData = canvas.toDataURL('image/jpeg', 1.0);      ?//方向默認(rèn)豎直，尺寸ponits，格式a4[595.28,841.89]???????????????????var?pdf?=?new?jsPDF('',?'pt',?'a4');????????????????????//addImage后兩個(gè)參數(shù)控制添加圖片的尺寸，此處將頁(yè)面高度按照a4紙寬高比列進(jìn)行壓縮????????????????????pdf.addImage(pageData,?'JPEG',?0,?0,?595.28,?592.28/canvas.width?*?canvas.height?);?????pdf.save('stone.pdf');??????????????}??????????})??????}??????????script>

如果頁(yè)面內(nèi)容根據(jù)a4比例轉(zhuǎn)化后高度超過(guò)a4紙高度呢，生成的pdf會(huì)怎么樣？會(huì)分頁(yè)嗎？

你可以試試，驗(yàn)證一下自己的想法。

jsPDF提供了一個(gè)很有用的API，?addPage()，我們可以通過(guò)?pdf.addPage()，來(lái)添加一頁(yè)pdf，然后通過(guò)?pdf.addImage(...)，將圖片賦予這頁(yè)pdf來(lái)顯示。
那么我們?nèi)绾未_定哪里分頁(yè)？

這個(gè)問(wèn)題好回答，我們可以設(shè)置一個(gè)?pageHeight，超過(guò)這個(gè)高度的內(nèi)容放入下一頁(yè)pdf。

來(lái)捋一下思路，將html頁(yè)面內(nèi)容生成canvas圖片，通過(guò)?addImage將第一頁(yè)圖片添加到pdf中，超過(guò)一頁(yè)內(nèi)容，通過(guò)?addPage()添加pdf頁(yè)數(shù),然后再通過(guò)?addImage將下一頁(yè)圖片添加到pdf中。

嗯～，很好！巴特，難道沒(méi)有發(fā)現(xiàn)問(wèn)題嗎？

這個(gè)方法實(shí)現(xiàn)的前提是 — — 我們能根據(jù)?pageHeight先將整頁(yè)內(nèi)容生成的canvas圖片分割成對(duì)應(yīng)的小圖片，然后一個(gè)蘿卜一個(gè)坑，一頁(yè)一頁(yè)?addImage進(jìn)去。
What? 想一想我們的canvas是腫么來(lái)的，不用拉上去，直接看下面：

html2canvas(document.body, {    onrendered:function(canvas) {     //it is here we handle the canvas    }})

這里的 body就是要生成canvas的元素對(duì)象，一個(gè)元素生成一個(gè)canvas；那么我們需要一頁(yè)一頁(yè)的canvas，也就是說(shuō)。。。

你覺(jué)得可能嗎？我覺(jué)得不太現(xiàn)實(shí)，按這思路要獲取頁(yè)面上不同位置的DOM元素，然后通過(guò) htnl2canvas(element,option)來(lái)處理，先不說(shuō)能不能剛好在每個(gè) pageHeight的位置剛好找到一個(gè)DOM元素，就算找到了，這樣做累不累。
累的話：）可以看看下面這種方法。

多頁(yè)
我提供的思路是我們只生成一個(gè)canvas，對(duì)就一個(gè)，轉(zhuǎn)化元素就是你要轉(zhuǎn)成pdf內(nèi)容的母元素，在這篇demo里就是 body了；其他不變，也是超過(guò)一頁(yè)內(nèi)容就?addPage，然后?addImage,只不過(guò)這里添加的是同一個(gè)canvas。

當(dāng)然這樣做只會(huì)出現(xiàn)多頁(yè)重復(fù)的pdf，那到底怎么實(shí)現(xiàn)正確分頁(yè)顯示。其實(shí)主要利用了jsPDF的兩點(diǎn)：

超過(guò)jsPDF實(shí)例格式尺寸的內(nèi)容不顯示（?var pdf=newjsPDF('','pt','a4');demo中就是a4紙的尺寸）
addImage有兩個(gè)參數(shù)可以控制圖片在pdf中的位置

雖然每一頁(yè)pdf上顯示的圖片是相同的，但我們通過(guò)調(diào)整圖片的位置，產(chǎn)生了分頁(yè)的錯(cuò)覺(jué)。

以第二頁(yè)為例，將豎直方向上的偏移設(shè)置為 -841.89即一張a4紙的高度，又因?yàn)槌^(guò)a4紙高度范圍的圖片不顯示，所以第二頁(yè)顯示了圖片豎直方向上[841.89,1682.78]范圍內(nèi)的內(nèi)容，這就得到了分頁(yè)的效果，以此類(lèi)推。
還是看代碼吧：

html2canvas(document.body, {  onrendered:function(canvas) {      var contentWidth = canvas.width;      var contentHeight = canvas.height;      //一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;      var pageHeight = contentWidth / 592.28 * 841.89;      //未生成pdf的html頁(yè)面高度      var leftHeight = contentHeight;      //頁(yè)面偏移      var position = 0;      //a4紙的尺寸[595.28,841.89]，html頁(yè)面生成的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');      //有兩個(gè)高度需要區(qū)分，一個(gè)是html頁(yè)面的實(shí)際高度，和生成pdf的頁(yè)面高度(841.89)      //當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)      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;              //避免添加空白頁(yè)              if(leftHeight > 0) {                pdf.addPage();              }          }      }      pdf.save('content.pdf');  }})

兩邊留邊距
修改imgWidth，并且在addImage時(shí)x方向參數(shù)設(shè)置你要的邊距，具體代碼如下：

var imgWidth = 555.28;var imgHeight = 555.28/contentWidth * contentHeight;...pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );...pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight);

本文完~