将html页面代码保存导出为图片并下载到本地png/jpg/gif格式【亲测实例】

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

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

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

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

需要用到的js插件：

jquery.js和html2canvas.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页面保存为图片并下载的亲测代码案例，有什么不懂的或者需要二次开发的请联系坤泰模板网在线客服。