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