jspdf / html2canvas切断数据

时间:2017-06-11 15:34:13

标签: php jspdf html2canvas

我已经查看了其他相关问题,但无法理解或更改此问题以使其正常运行。基本上我正在尝试保存tab0中包含的flot数据的pdf。由于某种原因,pdf输出减少了一半的页面,即使我使用最大的大小a0,它也缺少图表的图例,这里是代码。

{
  "properties": {
    "firstname": {
      "type": "string"
    },
    "lastname": {
      "type": "string",
      "pattern": "man"
    },
    "oneOf": [{
      "email": {
        "type": "string"
      },
      "phone": {
        "type": "string"
      }
    }]
  }
}

我想要做的就是允许保存的pdf捕获所有数据,即使它意味着跨越3或10个pdf页面。任何帮助大大收到...哦这里是html / php ...

(function ($) {
  $(function() {
//    $.plot($("#placeholder0"), [ { label: 'Test', data: [[0, 0], [1, 1]] } ], { yaxis: { max: 1 } });

    $("#generate0").on("click", function(e) {

      var pdf = new jsPDF('p', 'pt', 'a0');
  //    var pdf = new jsPDF();
      var canvas = pdf.canvas;

      canvas.height = 6000;

      html2canvas($('#content').get(0), {
          canvas:canvas,
          allowTaint: true,
          onrendered: function(canvas) {
      //      document.body.appendChild(canvas);
            console.log("rendered");
          /*    var iframe = document.createElement('iframe');
              iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:10000px; width:500px');
              document.body.appendChild(iframe);
              iframe.src = pdf.output('datauristring'); */

              pdf.save("Current Data2.pdf")
             //var div = document.createElement('pre');
             //div.innerText=pdf.output();
             //document.body.appendChild(div);
          }
      });

    });
});
}(jQuery))

1 个答案:

答案 0 :(得分:2)

我面临同样的问题,我发现这不是jsPDF页面大小的问题,而是html2canvas。

如果你指定html2canvas的canvas选项,那么html2canvas可能不会按宽度捕获元素$('#content').get(0),如果画布的宽度小于整个窗口的宽度,它将捕获整个窗口的宽度。窗口,捕获的图片切断。

试一试:

canvas.width = document.body.clientWidth

这不是最终的解决方案,但对我有用。