Question

在http://snippet.christopherkade.com我让我的用户下载代码段，我使用html2canvas呈现并保存屏幕上显示的控制台。这适用于Firefox，但Chrome显示此错误：

不允许将顶部框架导航到数据网址

当我执行以下操作时：

// Opens a window with the console to be copied or downloaded
html2canvas(document.getElementsByClassName('console'), {      
  onrendered: function(canvas) {
    var img = canvas.toDataURL()
    window.open(img);
  }
});

请注意，Chrome会在我的控制台中显示包含错误的空白页。

我找到的唯一信息是here。但这只能解释为什么谷歌做出了这个决定，而我却无法找到解决方案。

Answer 1

您可以使用blob：URL而不是数据：URL。

＆＃13;

b.onclick=async()=>{
  let blob = await new Promise(resolve=>c.toBlob(resolve));
  let url = URL.createObjectURL(blob);
  // Won't work here, because
  // "the request was made in a sandboxed frame whose 'allow-popups' permission is not set."
  window.open(url);
  let a = document.createElement('a');
  a.href = url;
  a.download = '';
  a.click();
};

＆＃13;

<canvas id=c></canvas>
<button id=b>save</button>

＆＃13;

html2canvas＆＃34;不允许将顶部框架导航到数据URL＆＃34;在Chrome上

1 个答案: