vue中edge浏览器html2canvas兼容问题

最新推荐文章于 2025-02-28 12:45:24 发布

原创最新推荐文章于 2025-02-28 12:45:24 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html2canwas兼容edge及ie

vue 专栏收录该内容

9 篇文章

订阅专栏

博客主要讲述工作中利用html2canvas生成图片时，在Chrome正常，但在edge和ie浏览器报错的问题。针对edge浏览器不支持toBlob属性方法，通过查看官方文档，在toBlob方法前加‘ms’前缀解决了兼容性问题。ie浏览器问题暂未解决，后续有进展会分享。

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

这几天工作之余遇到一个比较棘手的问题，是就是利用html2canvas生成图片，在Chrome中使用没有问题但是在edge和ie浏览器中报错：
1、在edge浏览器中提示：

t无法获取未定义或 null 引用的属性“toBlob”

2、在ie浏览器（ie11）中提示：

117ms html2canvas: Unable to access cssRules property
118ms html2canvas: Error: 找不到成员。
158ms html2canvas: Error: 找不到成员。
Unhandled promise rejection Error: 找不到成员。

本着先易后难的原则，我们来看第一个问题：
顾名思义，肯定是在edge浏览器中不支持toBlob属性方法。那么到底这个方法是不是兼容edge就需要去研究下关于此方法的官方文档了：
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Browser_compatibility
在这里插入图片描述
这就有点懵逼了！居然不支持edge…但是发现还有一行在ie浏览器下需要加一行前缀’ms’前缀的介绍，所以觉得还是应该一试。
首先当然是判断一下当前浏览器类型，这里可以在methods里面定义一个公共方法，如果只用一次的话建议还是写在当前组件当中：

getExplorer (){
	var explorer = window.navigator.userAgent,
        compare = function (s) { return (explorer.indexOf(s) >= 0); },
        ie11 = (function () { return ("ActiveXObject" in window) })();
    if (compare("MSIE") || ie11) { return 'ie'; }
    else if (compare("Firefox") && !ie11) { return 'Firefox'; }
    else if (compare("Chrome") && !ie11) {
        if (explorer.indexOf("Edge") > -1) {
            return 'Edge';
        } else {
            return 'Chrome';
        }
    }
    else if (compare("Opera") && !ie11) { return 'Opera'; }
    else if (compare("Safari") && !ie11) { return 'Safari'; }
}

通过上述方法可以拿到当前浏览器类型；
当为edge或ie浏览器时，在toBlob方法前面加上’ms’的前缀

var webType = this.getExplorer ();
if(webType  == 'Edge' || webType  == 'ie'){
        var blob = canvas.msToBlob();
        ....
        return;
    }

这样edge浏览器兼容性问题就解决了。
接下来ie浏览器下找不到成员问题：

暂时还没研究出来，后续有进展会继续分享~