html2canvas引起页面iframe执行

问题描述

当页面有iframe时，执行html2canvas绘制时，会再次触发iframe里的内容。

原理分析

html2canvas会把document下所有的节点都绘制一份放在另一个iframe里。从而导致页面上iframe重新render

解决办法

1. ignoreElements

import printPage from 'html2canvas';
setTimeout(() => {
  printPage(document.querySelector('#world-paper'), {
    useCORS: true, // 【重要】开启跨域配置
    scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
    allowTaint: true, // 允许跨域图片
    ignoreElements: (element) => {
       // 可换其他node节点
      if (element.nodeName === "IFRAME") {
        return true;
      }
      return false;
    }
  })
    .then((canvas) => {
      // 下载图片
      const imgData = canvas.toDataURL('image/jpeg', 0.6);
      let aImg = document.createElement('a');
      aImg.style.display = 'none';
      aImg.href = imgData;
      aImg.download = '海报.png';
      document.body.appendChild(aImg);
      aImg.click();
      document.body.removeChild(aImg);
    });
}, 500);

2. 删掉iframe标签

document.getElementById('telIframe') && document.getElementById('telIframe').parentElement.removeChild(document.getElementById('telIframe'));

注意：

最好是包一层setTimeout,让其绘制处于再宏任务中。没有setTimeout会在safari浏览器中，阻塞进程，页面卡住。

参考文献

html2canvas文档