html代码转换成图片，解决一些生成复杂的word或excel，直接生成图片

本文链接：https://blog.youkuaiyun.com/microopithecus/article/details/83349913

本文介绍如何利用HTML和canvas.js将HTML代码转换为图片，以应对生成复杂Word或Excel的情况。提供了相关资源下载链接，并欢迎新手交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入jquery-1.10.2.min

和我自己封装好的html@canvas.js 下载地址https://download.youkuaiyun.com/download/microopithecus/10741987

跟我一样的新手直接联系我私聊我因为想跟大牛们借点币花

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.10.2.min.js"></script>
 <script src="html2canvas.js"></script>
</head>
<body>
    <!-- 只需要在下面方法中把id改成你自己要生成图片的最外层id  #content-->
    <div id="content" style="width:150px;height:150px;border:1px solid blue;">
        <span>Hello World!</span>
        <br>
        <span><h2>Are you hear me?</h2></span>
    </div>
    <button id="btnSave">save</button>
<script>


$(function(){
    $('#btnSave').click(function(event) {
        html2canvas($('#content'),{
            onrendered: function(canvas) {
				alert("_____");
                //document.body.appendChild(canvas);
                convertCanvasToImage(canvas);
            }
        });

    });
});
	/**
 * 在本地进行文件保存
 * @param  {String} data     要保存到本地的图片数据
 * @param  {String} filename 文件名
 */
 var type = 'png';
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);
};

    function convertCanvasToImage(canvas) {
        var image = new Image();
       // image.src = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
		
       // document.body.appendChild(image);
		    var imgData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
         image.src=imgData;
  document.body.appendChild(image);
  
// 下载后的问题名
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData,filename);
      
        return image;
    }

</script>
</body>
</html>