html2canvas 仅转换窗口的可见区域答案

【问题标题】：html2canvas converting only visible area of windowhtml2canvas 仅转换窗口的可见区域
【发布时间】：2015-11-15 06:55:23
【问题描述】：

我正在为此使用 html2canvas 插件。

我目前正在使用此代码。

 html2canvas($("#chartDiv"), {                              
  onrendered: function (canvas) {

   var win = window.open();
   win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
   win.print(); 
  }
});

当我将 div 转换为画布时，只有窗口的可见部分变成了画布。

我需要找到一个解决方案，如果 div 超过窗口的大小。 ?

提前致谢

【问题讨论】：

标签： javascript jquery html printing html2canvas

【解决方案1】：

我在拍摄 Bootstrap 模态图像时遇到了同样的问题。对我有用的技巧是我在正文末尾添加了一种临时类型的div 和visibility:hidden，例如：

<div id="TempDataDiv" style="visibility:hidden"></div>

然后在调用html2canvas 之前，我在TempDataDiv 中添加了内容，并在onrendered 函数中删除了内容，如下所示（两次以避免在边缘切割）：

$("#TempDataDiv").html($("#chartDiv").html() + $("#chartDiv").html());

var useHeight = $("#chartDiv").prop('scrollHeight');

html2canvas($("#chartDiv"), {
    height: useHeight,
    onrendered: function(canvas) {
        imageData =  canvas.toDataURL();
        $("#TempDataDiv").html("");
        var win = window.open();
        win.document.write("<br><img src='" + imageData  + "'/>");
        win.print();
    }
});

我有点笨拙，但对我来说效果很好。

【讨论】：

【解决方案2】：

看起来您唯一的选择是在渲染之前修改页面以使其看起来像您希望图像的外观。

我在使用 html2canvas 时遇到了同样的问题，这是其中之一原因，为什么我现在自己编写将我想要的东西绘制到画布上的方法。

也许看看this

【讨论】：

我经历过，运气不好。一个人所做的示例是 div 内容中的文本，效果很好。但在我的情况下，我有一个我必须打印的 jOrg 图表..