Mozilla firefox中的html2canvas冲突答案

【问题标题】：html2canvas conflict in mozila firefoxMozilla firefox中的html2canvas冲突
【发布时间】：2016-08-14 03:07:19
【问题描述】：

我正在使用html2canvas 库。该代码采用div 并将其内容保存为png。它适用于opera 和chrome，但是当我在firefox 中运行代码时，它不会将 div 保存为 png。在 Firefox 中单击下载按钮时不会发生任何操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
  </head>
  <body>
    <div id="html-content-holder">
      Div part to save as png
    </div>
    <input id="btn-Convert-Html2Image" type="button" value="Download" />
    <script>
      $('#btn-Convert-Html2Image').click(function() {
        html2canvas($('#html-content-holder'), {
          onrendered: function(canvas) {
            var a = document.createElement('a');
            a.href = canvas.toDataURL("image/png")
            a.download = 'somefilename.png';
            a.click();
          }
        });
      });
    </script>
  </body>
</html>

【问题讨论】：

定义不起作用
当我按下下载按钮时，它不会将 div 保存为 png。当我点击按钮时没有任何动作发生
控制台有错误吗？你能分享一个小提琴吗？
为什么要加载两个html2canvas 库？这可能是问题的原因。
@Justinas ：我尝试过，以防 html2canvas 无法通过链接工作。虽然我后来搬了。那没有帮助。还是一样的问题

标签： javascript html2canvas

【解决方案1】：

在DOM 中保留一个hidden 锚元素，并在onrendered 处理程序中更新该元素的href 属性。

$('#btn-Convert-Html2Image').click(function() {
  html2canvas($('#html-content-holder'), {
    onrendered: function(canvas) {
      var a = $('#download').get(0);
      a.href = canvas.toDataURL("image/png")
      a.download = 'somefilename.png';
      a.click();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
<div id="html-content-holder">
  Div part to save as png
</div>
<input id="btn-Convert-Html2Image" type="button" value="Download" />
<a href="" id='download'></a>

Fiddle Demo

【讨论】：

非常感谢。这也适用于 Firefox 以及其他浏览器。
为我工作。谢谢@Rayon

【解决方案2】：

您需要在 Firefox 中将锚元素附加到正文。

html2canvas($('#html-content-holder'), {
      onrendered: function(canvas) {
        var a = document.createElement('a');
        a.href = canvas.toDataURL("image/png")
        a.download = 'somefilename.png';
        document.body.appendChild(a);
        a.click();
      }
    });

【讨论】：

最好在 DOM 中保留一个元素并更新 href 属性，否则它将创建 needless <a> 元素..