将指定div转换成图片并下载,新版本与旧版本

导入js文件 html2canvas.js:
<script src="${pageContext.request.contextPath}/js/html2canvas/build/html2canvas.js" type="text/javascript"></script>

jquery 语句(旧版本):

        $(document).on('click','#printBtn',funct
	    	var flag=false;
			$("#printTabId tbody > tr").each(function(){
				flag=true;
			});
	    	if(!flag){
	    		 bootbox.alert("无内容打印!");
	    		 return false;
	    	}
          	 var now=getNowFormatDate(); //自己写的获取时间方法
          	 var title=$("#companyNameId").val();
	    	 html2canvas($("#printTabId"), {
	                onrendered: function (canvas) {
	                    var ctx = canvas.getContext('2d');
	                    var url = canvas.toDataURL("image/jpeg", 1.0);
	                    var image = new Image();
	                    image.src = url;
	                    var triggerDownload = $("<a>").attr("href", url).attr("download", title+now+".png").appendTo("body");
	                    triggerDownload[0].click();
	                },
	                useCORS:true});    
        });
        //获取现在日期
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
             var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
             return currentdate
        }

#printTabId 是我指定要打印成图片的div的id


jquery 语句(新版本):

function printPhoto(tab){
  html2canvas(document.querySelector("#"+tab)).then(canvas => {

            // 图片导出为 png 格式
            var type = 'png';
            var imgData = canvas.toDataURL(type);
            var _fixType = function(type) {
                type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                var r = type.match(/png|jpeg|bmp|gif/)[0];
                return 'image/' + r;
            };

            // 加工image data,替换mime type
            imgData = imgData.replace(_fixType(type),'image/octet-stream');

            //console.log(imgData);

            var saveFile = function(data, filename){
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = data;
                save_link.download = filename;

                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
            };

            // 下载后的文件名
                    var filename = 'XXXXXX'+ '.' + type;
            // download
                    saveFile(imgData,filename);

    });
}
tab 是我指定要打印成图片的div的id

猜你喜欢

转载自blog.csdn.net/zengguanlin/article/details/79315456