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

1. html2canvas

簡介我們可以直接在瀏覽器端使用html2canvas，對整個或局部頁面進行“截圖”。但這并不是真的截圖，而是通過遍歷頁面DOM結構，收集所有元素信息及相應樣式，渲染出canvas image。由于html2canvas只能將它能處理的生成canvas image，因此渲染出來的結果并不是100%與原來一致。但它不需要服務器參與，整個圖片都由客戶端瀏覽器生成，使用很方便。使用使用的API也很簡潔，下面代碼可以將某個元素渲染成canvas：html2canvas(element, { onrendered: function(canvas) { // canvas is the final rendered element }});通過onrendered方法，可以將生成的canvas進行回調，比如插入到頁面中：html2canvas(element, { onrendered: function(canvas) { document.body.appendChild(canvas); }});做個小例子(demo1)代碼如下： html2canvas example one ...

it is a title

Stone Giant ...

Stone Giant

Coming ...

以一團石頭...

write by linwalker @2017 html2canvas(document.body, { onrendered:function(canvas) { document.body.appendChild(canvas) } }) 這個例子將頁面body中的元素渲染成canvas，并插入到body中。

2. jsPDF

jsPDF庫可以用于瀏覽器端生成PDF。文字生成PDF使用方法如下：// 默認a4大小，豎直方向，mm單位的PDFvar doc = new jsPDF();// 添加文本‘Download PDF’doc.text('Download PDF!', 10, 10);doc.save('a4.pdf');圖片生成PDF使用方法如下：// 三個參數，第一個方向，第二個單位，第三個尺寸格式var doc = new jsPDF('landscape','pt',[205, 115])// 將圖片轉化為dataUrlvar imageData = ‘data:image/png;base64,iVBORw0KGgo...’;doc.addImage(imageData, 'PNG', 0, 0, 205, 115);doc.save('a4.pdf');文字與圖片生成PDF// 三個參數，第一個方向，第二個尺寸，第三個尺寸格式var doc = new jsPDF('landscape','pt',[205, 155])// 將圖片轉化為dataUrlvar 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。

3. html2canvas + jsPDF

單頁將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，參數：圖片格式和清晰度(0-1) var pageData = canvas.toDataURL('image/jpeg', 1.0); ?//方向默認豎直，尺寸ponits，格式a4[595.28,841.89]???????????????????var?pdf?=?new?jsPDF('',?'pt',?'a4');????????????????????//addImage后兩個參數控制添加圖片的尺寸，此處將頁面高度按照a4紙寬高比列進行壓縮????????????????????pdf.addImage(pageData,?'JPEG',?0,?0,?595.28,?592.28/canvas.width?*?canvas.height?);?????pdf.save('stone.pdf');??????????????}??????????})??????}??????????script>如果頁面內容根據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的兩點：

• 超過jsPDF實例格式尺寸的內容不顯示(?var pdf=newjsPDF('','pt','a4');demo中就是a4紙的尺寸)

• addImage有兩個參數可以控制圖片在pdf中的位置

雖然每一頁pdf上顯示的圖片是相同的，但我們通過調整圖片的位置，產生了分頁的錯覺。以第二頁為例，將豎直方向上的偏移設置為 -841.89即一張a4紙的高度，又因為超過a4紙高度范圍的圖片不顯示，所以第二頁顯示了圖片豎直方向上[841.89,1682.78]范圍內的內容，這就得到了分頁的效果，以此類推。還是看代碼吧：html2canvas(document.body, { 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; //頁面偏移 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('content.pdf'); }})兩邊留邊距修改imgWidth，并且在addImage時x方向參數設置你要的邊距，具體代碼如下：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);本文完~

總結

以上是生活随笔為你收集整理的HTML怎么把文字分栏_JS将HTML生成PDF并下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。