其中用到了html2canvas.js（這個是html轉成canvas的） 和jsPdf.debug.js（這個是canvas轉成img轉成pdf用的）
測試代碼直接貼上來（還沒有優化），自己定義好容器和id，我這個代碼高度和寬度是按照A4的比例來的，可以自己定義高度和寬度，代碼里面修改即可，這段代碼沒有優化，記錄只是為了 方便以后查看（ps：需要下載為pdf的容器和父容器的高度和寬度最好不要用百分比來寫，好像會有小問題，本人沒有測試，但是查看其它文章的時候又說到這部分）
<style>
.page {
width:592.28px;
min-height:841.89px;
border:3px red solid;
border-radius:5px;
background:white;
box-shadow:0 0 5px rgba(0,0,0,0.1);
box-sizing: border-box ;
}
.subpage {
height:800px;
/* outline:20px #FFEAEA solid; */
}
.myHeight{
height: 100%!important;
}
</style>
<!--本頁面放所有的jsp頁面 下載的時候用的-->
<body >
<div id="download" style="position: absolute;z-index: 10000">下載</div>
<div id="myHeight" style="width: 100%;height: 100%" >
<div id="downloaddiv" style="overflow: auto;margin: 0 auto;width:100%;" class="myHeight">
<div style="width: 592.28px;margin: 0 auto">
<div class ="page">
<div class ="subpage" id="P01">第1頁/ 4</div>
</div>
<div class ="page">
<div class ="subpage" id="P02">第2頁/ 4</div>
</div>
<div class ="page" >
<div class ="subpage" id="P03">第3頁/ 4</div>
</div>
<div class ="page">
<div class ="subpage" id="P04">第4頁/ 4</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//最新轉canvas和pdf的方法
var htmltopdfmain = {
init:function(){
htmltopdfmain.setListener();
},
//設置監聽事件
setListener:function(){
var btnShare = document.getElementById("download");//下載按鈕
btnShare.onclick = function(){
var myHeight=$("#downloaddiv");
myHeight.css("width","592.28px");
myHeight.removeClass("myHeight");
htmltopdfmain.html2Canvas();
myHeight.addClass("myHeight")
myHeight.css("width","100%");
}
},
//獲取像素密度，這個函數 就是下面設置的倍數 即scaleBy ,現在不調用這個函數 ，直接寫死 就行
getPixelRatio:function(context){
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
},
//繪制dom 元素，生成截圖canvas
html2Canvas: function () {
var shareContent = $("#downloaddiv");// 需要繪制的部分的 (原生）dom 對象 ，注意容器的寬度不要使用百分比，使用固定寬度，避免縮放問題
var width = shareContent.outerWidth(); // 獲取(原生）dom 寬度
var height = shareContent.outerHeight(); // 獲取(原生）dom 高
/* var offsetTop = shareContent.offset().top; //元素距離頂部的偏移量
var offsetLeft=shareContent.offset().left;//元素距離左邊的偏移量*/
shareContent.offset({top:0,left:0});//這里必須這樣處理，不然canvas 轉成img會出現黑屏部分
var canvas = document.createElement('canvas'); //創建canvas 對象
var context = canvas.getContext('2d');
var scaleBy = 3;//這個比例 主要是為了防止 html轉成canvas時出現模糊 ，越大越卡 ，最好是2
//var scaleBy = htmltopdfmain.getPixelRatio(context); //獲取像素密度的方法 (也可以采用自定義縮放比例)
//這個canvas 的寬度和高度 可以設置偏移量 也可以不設置 設置偏移量時，改為canvas.width = (width + offsetTop)* scaleBy;高度類似
canvas.width = (width )* scaleBy; //這里 由於繪制的dom 為固定寬度，居中，所以沒有偏移
canvas.height = (height) * scaleBy; // 注意高度問題，由於頂部有個距離所以要加上頂部的距離，解決圖像高度偏移問題
context.scale(scaleBy, scaleBy);
var opts = {
allowTaint:true,//允許加載跨域的圖片
tainttest:true, //檢測每張圖片都已經加載完成
scale:scaleBy, // 添加的scale 參數
canvas:canvas, //自定義 canvas
logging: true, //日志開關，發布的時候記得改成false
width:width, //dom 原始寬度
height:height //dom 原始高度
};
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d');
// 【重要】關閉抗鋸齒
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
$(canvas).css({
"width": canvas.width / scaleBy + "px",
"height": canvas.height / scaleBy + "px",
"background-color":"white"
});
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
//下面處理防止canvas轉成img時 出現黑色背景，現在更改為白色背景
for(var i = 0; i < imageData.data.length; i += 4) {
// 當該像素是透明的，則設置成白色
if(imageData.data[i + 3] == 0) {
imageData.data[i] = 255;
imageData.data[i + 1] = 255;
imageData.data[i + 2] = 255;
imageData.data[i + 3] = 255;
}
}
context.putImageData(imageData, 0, 0);
/* 以上代碼將html轉成canvas完成，下面代碼將canvas 轉成pdf 按照A4的大小比例來轉 以下數字 592.28代表寬度，841.89代表高度 */
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一頁pdf顯示html頁面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html頁面高度
var leftHeight = contentHeight;
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
//pdf頁面偏移
var position = 0;
//var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
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');
});
}
};
//最后運行代碼
$(function(){
htmltopdfmain.init();
})
</script>