将html代码导出为图片并下载到本地

html代码：

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

需要用到的js插件：

jquery.js和html2canvas.min.js，其中html2canvas.min.js的获取地址可以是官网地址：http://html2canvas.hertzen.com/；

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>

亲自试验可行哦！

转载自：https://blog.csdn.net/qq547276542/article/details/51906741