<script src="${basePath!}/js/jQuery.print.js"></script>

思想就是:先转成图片,在打印,省得会有页面乱掉的问题,

function toImg(fn){
		var copyDom = $("#first");// 这个dom元素是要导出pdf的div容器
	    var width = copyDom.width();//dom宽
	    var height = copyDom.height();//dom高
	    var scale = 2;//放大倍数
	    var canvas = document.createElement('canvas');
	    canvas.width = width*scale;//canvas宽度
	    canvas.height = height*scale;//canvas高度
	    var content = canvas.getContext("2d");
	    content.scale(scale,scale);
	    var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
	    content.translate(-rect.left,-rect.top-36);//设置context位置,值为相对于视窗的偏移量负值,让图片复位
	    html2canvas(copyDom, {
	        dpi: window.devicePixelRatio*2,
	        scale:scale,
	        canvas:canvas,
	        width:width,
	        heigth:height,
	    }).then(function (canvas) {
	    	var pageData = canvas.toDataURL('image/jpeg', 1.0);
	    	fn(pageData,canvas);
	    })
	}
	$("#print").click(function(){
		toImg(function(pageData){
			$("#totleImg").show();
	    	$("#totleImg").attr('src',pageData);
	    	$.print("#totleImg");
	    	$("#totleImg").hide();
		});
	})

准备一个img专门来放转好的图片,然后控制显示隐藏,<img src="" id="totleImg" >

first是要打印的部分

注意:

打印部分的图片不能是背景图

里面的图片不能是远程的

里面的图片不能高度得是auto

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐