为客户做到一个在线签订合同功能,使用织梦cms程序制作,编码为UTF-8国际通用语言,里面有一项需要在客户在线签名后,需要下载html页面为图片,并保存至本地,在往上找了很多,都不是很理想,部分平台的是拿来直接叫卖,亲测安装到实例自己找的代码,经过亲测能实现html页面下载到本地保存为png格式的图片,分享给有需要的同学,同时自己留档,需要的时候拿来使用。

首先,需要在html页面植入以下代码:

<div id="content_cf">
里面是你要导出图片的html内容
</div>
<a href="javascript:baocun()">下载合同方案</a>

这里需要注意的是id="content_cf",只要是这个div框架里面的内容,就会默认保存为图片并下载。

需要用到的js插件:

jquery.jshtml2canvas.min.js,其中html2canvas.min.js的获取地址可以是官网地址:http://html2canvas.hertzen.com/

若是不会下载的,可以找坤泰模板网在线客服获取此2项JS文件。

下面还有一段js代码需要放在html页面的最底部,</body>的上面,是上面,上面,上面。

js代码:

<script type="text/javascript">
function baocun(){
		/*通过上面的div id="content_cf" 获取到canvas画布*/
		html2canvas(document.querySelector("#content_cf")).then(canvas => {
		    //document.body.appendChild(canvas);/*这是直接把画布图片追加到页面上,页面上直接就能看到*/
            // var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // 通过canvas画布生成的图片的url 
        	//window.location.href= imgURL;/*这是直接通过上面获取的链接直接下载,这个下载很粗糙,下载的图片没有后缀名,虽然可以打开为图片;故而优化出一下方法*/
        	/**
			 * 获取mimeType
			 * @param  {String} type the old mime-type
			 * @return the new mime-type
			 */
        	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');
			
			/**
			 * 在本地进行文件保存
			 * @param  {String} data     要保存到本地的图片数据
			 * @param  {String} filename 文件名
			 */
			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 = '合同方案' + (new Date()).getTime() + '.' + type;
			// download
			saveFile(imgData,filename);
		});
		
	}
</script>

经过不断的尝试,以上操作方案是可行的,亲测可行。不过新手会遇到一个问题,那就是下载的图片只有半截,而不是全部的,那是因为你的页面太长了,有滚动条导致的,解决这个方法也非常简单。

html页面保存为图片不完整,只有半截图片,只需要把以上"下载合同方案"那段,也就是这段“<a href="javascript:baocun()">下载本志愿方案</a>”代码放到html页面的首屏,html最顶端即可。因为有滚动条,滚动下来后,js渲染加载没有完整导致的图片不齐全。

好了,这就是亲测过的html页面保存为图片并下载的亲测代码案例,有什么不懂的或者需要二次开发的请联系坤泰模板网在线客服。