DIV转成图片并导出html2canvas.js

最新推荐文章于 2024-08-09 09:47:57 发布

生活如水

最新推荐文章于 2024-08-09 09:47:57 发布

阅读量5.9k

点赞数

分类专栏： HTML JS 文章标签： HTML JS html2canvas

本文链接：https://blog.csdn.net/qq_37511501/article/details/79214406

版权

本文介绍了如何使用html2canvas.js将HTML页面的某个DIV或整个BODY转换为图片，并解决了IE浏览器不兼容Promise的问题，通过引入bluebird.min.js实现兼容。提供了相关资源下载链接及API参考，附带了使用方法和实际效果展示。

摘要由CSDN通过智能技术生成

小猿目前接到一个需求就是把一个页面转成图片并导出

上网查到各种工具所采用的就是html2canvas.js （里面代码没细看）

这个工具相当不错，我们可以将某一个DIV或者BODY转成图片并且下载。

我们将DIV转成图片并且用64进制转换，再写一个方法去下载该图片

在做的过程中遇到 IE 不兼容 promise 这个时候我们用到工具

bluebird.min.js 将其引入之后就没问题了

资源 html2canvas.js and html2canvas.svg.js and bluebird.min.js

下载地址：http://download.csdn.net/download/qq_37511501/10232976 资源

html2canvas 使用 API：https://www.jianshu.com/p/6a07e974a7e8

该资源有demo 亲测浏览器谷歌和IE 其它没测

下面是使用方法，图片的宽高也可以自定义

// DIV id imgEchartsAndTable 是div ID
html2canvas($("#imgEchartsAndTable"), {
    onrendered: function(canvas) {
        canvas.id = "mycanvas";
        var img = convertCanvasToImage(canvas);
        //调用下载方法 封装的下载方法，都在资源里面
        if(browserIsIe()){  //假如是ie浏览器 
            DownLoadReportIMG('MTTR趋