<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是要列印的部分

注意：

列印部分的圖片不能是背景圖

裡面的圖片不能是遠端的