关于html2Canvas和domToImage两个插件的浏览器兼容性问题。（IE兼容）

原创已于 2023-05-19 18:40:01 修改

· 869 阅读

0 ·

版权

文章标签：

#javascript #前端 #es6 #jquery #css

于 2023-05-19 18:38:43 首次发布

文章讲述了在需要将HTMLtable转换为图片时遇到的问题，主要涉及html2canvas和dom-to-image两个插件。在使用html2canvas时，遇到了表格最后一行显示不全、IE浏览器Promise不支持、缺少表格边框以及caption标签样式问题。而在使用dom-to-image时，主要问题是IE浏览器的兼容性和caption样式差异。针对这些问题，作者提出了相应的解决方案，包括增加画布高度、引入polyfill库、修改DOM结构以及处理数据转换。

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

需求场景：需要将多个table表格dom节点生成为图片。
分别记录下两个插件使用的问题。

两个插件的使用前提，都是将table的dom节点绝对定位到页面之外（当前页面可视范围内无法看到，做过尝试对比，无论在可视范围内还是外都效果都一致）。

html2canva

使用方式

// 首先创建好canvas画布
var rect = tableDom.getBoundingClientRect(); // 获取元素相对视屏的偏移量
var canvas = document。createElemnet('canvas'),
    content = canvas.getContext('2d');
    
    canvas.width = tableDom_width;
    canvas.height = tableDom_height;
    
    content.translate(-rect.left,-rect.top);
    
    var tableData = {
        useCORS: true, //是否尝试使用CORS从服务器加载图像，改为true，不然canvas截取出来的图片显示不了
        dpi: window.devicePixelRatio * 2,
        width: width,
        height: height,
        canvas: canvas,
        letterRendering: true, //设置了字间距的时候用到，不加或者false的话截图出来的文字字间距会显示成单词与单词之间隔开
    };
    
html2canvas($j, tableData).then(function(canvas) {
    var dataURL = canvas.toDataURL("image/png");
    ...
} )

出现的问题：

1、截出来的表格图片最后一行显示不全。
解决方法：增加画布的高度。

 canvas.height = tableDom_height * 1.5;

2、非node项目IE浏览器下报错promose未定义。这是由于源码中使用了promise而IE不支持es6语法。而非node项目无法配置webpack-babel。
解决方法：引入拓展库文件。

<script type="text/javascript" src="js/babelpolyfill/babel-polyfill.min.js"></script>

3、生成的图片，没有table表格的边框，只有表格内的文字内容。该问题暂时还不知道如何解决，希望了解的大佬可以教一下。最后的解决方法，是强行在td标签中插入div并设置边框，使得生成的图片和表格视觉内容一致。

4、生成的表格，如果带有caption标题标签，标签会强行生成边框。
解决方式也是简单粗暴在处理节点时将capation标签换位div，再设置div的边框样式（需要配置上display：
table-caption）。

dom-to-image

该插件配置方式比较简便，不足点在于无法兼容IE。

var canvasData = {
    width: tableDom_width,
    height: tableDom_height
}

domtoimage.toBlob(tableDom, canvasData).then(function(canvas){
    ...
    // toBlod() 是返回blob格式
    // toPng() 是返回一个base64格式
})

出现的问题

1、同样使用了promise，而且使用了多个IE浏览器不支持的api（如SVG的foreignObject、canvas.toBlob），所以IE无法使用该插件。

2、生成的表格如果带有caption标题，样式会出现差异。这时候要根据实际样式情况进行调节。我的处理方式和使用html2canvas的方式一样，只是解决的问题不同。

方法调用的回调

可以对IE兼容进行处理。
（生成图片url的接口一般传递blob对象，base64可以通过File对象转换，但是IE不支持，所以通过Blob对象转换）

// html2canvas返回了base64图像
var dataURL = canvas.toDataURL('image/png'),
    file = '',
    arr = dataURL.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    
for (var k = 0; k < n: k++) {
    u8arr[k] = bstr.charCodeAt(k);
}    

file = new Blob([u8arr], {type: mime});