本文小編為大家詳細(xì)介紹“如何使用html canvas實(shí)現(xiàn)網(wǎng)頁截圖并嵌入到PDF”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“如何使用html canvas實(shí)現(xiàn)網(wǎng)頁截圖并嵌入到PDF”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

創(chuàng)新互聯(lián)建站是一家專注于做網(wǎng)站、網(wǎng)站建設(shè)與策劃設(shè)計,桐鄉(xiāng)網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:桐鄉(xiāng)等地區(qū)。桐鄉(xiāng)做網(wǎng)站價格咨詢:028-86922220

canvans的原理是將dom節(jié)點(diǎn)在Canvas里畫出來，雖然特殊方便，但是仍有一些限制。如：

不支持iframe

不支持跨域圖片

部分瀏覽器上不支持SVG圖片

不支持Flash

不支持古代瀏覽器和IE9以下

function canvasImg(divName,formName,actionType){

html2canvas(divName, {

onrendered : function(canvas) {

var myImage=canvas.toDataURL(“image/jpeg”);

//動態(tài)生成input框

var input1=document.createElement(‘input’);

input1.setAttribute(‘type’, ‘hidden’);

input1.setAttribute(‘name’, ‘canvasImg’);

input1.setAttribute(‘value’,myImage);

formName.appendChild(input1);

formName.actionType.value=actionType;

formName.submit();

}

});

}

在這里我抽取成了公共JS，divName是$(‘#id’)取需要截圖的DOM對象，function(canvas)渲染完成后回調(diào)的canvas對象formName是form表單的名字，actionType是action方法名。 我這里是將得到的截圖，進(jìn)行Base64編碼，再通過post請求，在后臺獲取。

data是經(jīng)過base64編碼的圖片數(shù)據(jù)，將圖片通過寫入文件流中。

這里的PDF使用是IText生成。

如果圖片過大，則必須進(jìn)行分頁。但是生成的是一張大圖，Itext無法進(jìn)行自動分頁。這里分頁有兩種思想。一是使用虛擬打印機(jī)，將圖片分頁，再進(jìn)行導(dǎo)出。二就是將大圖切成小圖，這種方式依賴于圖片切分的大小比列。這里我只實(shí)現(xiàn)了第二種方式，所以只對第二種做一些講解。

讀到這里，這篇“如何使用html canvas實(shí)現(xiàn)網(wǎng)頁截圖并嵌入到PDF”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。