html2canvas使用指南

问题描述

最近项目中需要使用到将网页中的内容下载成图片，通过按钮点击将页面保存下来，方便同事使用进行工作汇报。如图：

![](https://img-blog.csdnimg.cn/4cc0a5ce5b2b462c9163f885d12d2aff.png)

解决方案：

然后我想到了html2canvas，就可以解决我现在遇到的问题了。我火速从官网下载了js文件，这里附上链接：

http://html2canvas.hertzen.com/

这里 **html2canvas **为我们提供了三种方式，由于项目限制我只能下载 **html2canvas.js **文件到本地。

详细代码：

1、首先我们引入js文件：

<script type="text/javascript" src="${jsPath}/html2canvas/html2canvas.js"></script>

我这里是一个jsp项目文件，小伙伴们在引入js文件时注意自己的路径问题，避免出现低级错误。

2、然后给需要下载的网页内容自定义一个类名。例如：

<div id="ajax_list">正在加载列表，请稍后……</div>

3、写入触发按钮，点击按钮，将"#ajax_list"中的内容下载下来。

<button class="button button-primary" onclick="uploadImg();">一键下载</button>

4、进行js代码编写，对 uploadImg() 方法进行编写。还是直接上代码吧！

// 这是按钮触发事件
function uploadImg(){
    html2canvas(document.querySelector("#ajax_list")).then(canvas => {
        document.body.appendChild(canvas)
        let imageURL = canvas.toDataURL("image/png");    
        //canvas转base64图片，这里我们将base64图片进行下载到本地就可以了
        savePic(imageURL);
    });
}
// 下载方法
function savePic(base64) {
    var arr = base64.split(',');
    var bytes = atob(arr[1]);
    let ab = new ArrayBuffer(bytes.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    var blob = new Blob([ab], { type: 'application/octet-stream' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = new Date().valueOf() + ".png";
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
    URL.revokeObjectURL(url);
    
}

问题：

1、当我们对上面代码进行点击运行时，发现每次执行 uploadImg() 方法都会在我们的页面中生成一个 <canvas> 标签。这里呢我们在 uploadImg() 方法最后在写入下面的代码，在每次获取到base64格式图片后，我们在dom中移除掉 <canvas> 标签。

document.body.removeChild(canvas)

就变成了这样：

function uploadImg(){
    html2canvas(document.querySelector("#ajax_list")).then(canvas => {
        document.body.appendChild(canvas)
        let imageURL = canvas.toDataURL("image/png");    //canvas转base64图片
        savePic(imageURL);
        document.body.removeChild(canvas)
    });
}

再次点击“一键下载”按钮运行，就成功啦！

使用 html2canvas 时，注意：

1、css 中使用 position 属性，注意层级问题，需写清层级，使用 z-index 解决，否则会导致页面层级混乱。

2、css 中使用 transform 属性，**html2canvas **并不兼容该属性，保存时会导致使用 transform 属性的标签失效，建议不使用或用图片替换。

3、在保存页面内容中，如果需要使用到背景图，请使用 标签代替 background-image 属性，**html2canvas **不兼容该属性，请注意替换。

暂时就先这么多，如果后续有其它内容我在补充，欢迎小伙伴们的指点！！！