IE11中使用html2canvas的Promise函数出现语法错误求解决

嘿，我之前也踩过IE11和html2canvas兼容的坑，你的问题其实分两部分：直接触发语法错误的不是Promise，而是ES6箭头函数，另外Promise polyfill没生效大概率是加载顺序的问题，一步步来解决：

1. 先把箭头函数换成传统函数（解决语法错误的核心） #

IE11完全不支持ES6的箭头函数（canvas => { ... }这种写法），这才是你那行代码报语法错误的直接原因！先把代码改成普通函数表达式：

html2canvas(document.getElementById("print"), { height: 990, width: 1760, logging:false }).then(function(canvas) {
  document.getElementById('png-container').appendChild(canvas);
  $('#png-container > canvas').attr('id','thecanvas');
  var title = $('#title').text(); // IE11对let/const支持差，换成var更稳妥
  exportCanvasAsPNG('thecanvas',title);
});

2. 修复Promise Polyfill的加载问题 #

你加了polyfill但没生效，大概率是加载顺序错了：

• 必须在html2canvas的脚本之前加载promise-polyfill！因为html2canvas初始化的时候会检查全局的Promise对象，如果加载它的时候还没有polyfill，它就会默认用原生Promise（IE11根本没有），后续再加载polyfill也补不上了。
• 可以在IE11的控制台里输入Promise验证：如果返回function Promise() { [native code] }，说明polyfill加载成功；如果是undefined，那就是加载路径或者顺序有问题，得调整脚本的引入顺序。

3. 确认html2canvas版本兼容IE11 #

新版本的html2canvas已经彻底放弃IE11支持了，如果你用的是2.x及以上版本，肯定会有问题。建议降级到1.0.0-rc.7版本，这是最后一个官方宣称支持IE11的稳定版本。

额外的IE11兼容注意点 #

• 如果你的页面里有跨域图片，要在html2canvas的配置里加上useCORS: true，同时确保图片服务器配置了正确的CORS头，不然IE11会拒绝渲染这些图片。
• 如果你用了jQuery，也要确保版本是兼容IE11的——比如jQuery 3.6.0及以上已经放弃IE11，建议用3.5.1或者2.x版本。

内容的提问来源于stack exchange，提问作者Andrelope