最新版通过前端js 代码实现html转canvas载转成pdf的方法
其中用到了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>
