带有多个chart.js图表的页面到pdf

我已经使用chart.js来生成具有多个图表的报表页面。我需要将此报告导出为PDF。有很多解决方案可以通过搜索，但我找不到一个具有多个画布元素的解决方案。带有多个chart.js图表的页面到pdf

唯一可用的解决方案似乎是遍历所有图像，并使用图像重新创建报告，然后将其下载为pdf。

有没有更简单/更有效的方法来实现这个目标？

<body> 
<h1> Chart 1 </h1> 
<div style="width:800px; height:400px;"> 
<canvas id="chart_1" width="50" height="50"></canvas> 
</div> 

<h1> Chart 2 </h1> 
<div style="width:800px; height:400px;"> 
<canvas id="chart_2" width="50" height="50"></canvas> 
</div> 

<h1> Chart 3 </h1> 
<div style="width:800px; height:400px;"> 
<canvas id="chart_3" width="50" height="50"></canvas> 
</div> 
</body>

来源

2017-03-31 Sainath Krishnan

老实说，这似乎是最简单的方法是只提供了“下载到PDF”链接，弹出浏览器的打印页面，并指导用户选择“打印成PDF”。

如果这种方法对您（或您的用户）不起作用，那么这是一个粗略的方法。

基本上，我们创建了一个新的canvas元素，它是报表页面的大小，并将您现有的chart.js canvas图表中的像素递增绘制为新的canvas。完成后，您可以使用jsPDF将新画布作为图像添加到PDF文档并下载文件。

下面是一个示例实现。

$('#downloadPdf').click(function(event) { 
    // get size of report page 
    var reportPageHeight = $('#reportPage').innerHeight(); 
    var reportPageWidth = $('#reportPage').innerWidth(); 

    // create a new canvas object that we will populate with all other canvas objects 
    var pdfCanvas = $('<canvas />').attr({ 
    id: "canvaspdf", 
    width: reportPageWidth, 
    height: reportPageHeight 
    }); 

    // keep track canvas position 
    var pdfctx = $(pdfCanvas)[0].getContext('2d'); 
    var pdfctxX = 0; 
    var pdfctxY = 0; 
    var buffer = 100; 

    // for each chart.js chart 
    $("canvas").each(function(index) { 
    // get the chart height/width 
    var canvasHeight = $(this).innerHeight(); 
    var canvasWidth = $(this).innerWidth(); 

    // draw the chart into the new canvas 
    pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight); 
    pdfctxX += canvasWidth + buffer; 

    // our report page is in a grid pattern so replicate that in the new canvas 
    if (index % 2 === 1) { 
     pdfctxX = 0; 
     pdfctxY += canvasHeight + buffer; 
    } 
    }); 

    // create new pdf and add our new canvas as an image 
    var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]); 
    pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0); 

    // download the pdf 
    pdf.save('filename.pdf'); 
});

你可以看到它在这个codepen的行动。

现在让我们来讨论一下这种方法的一些问题。首先，您必须控制每个chart.js canvas在新对象canvas中的位置。要做到这一点的唯一方法是了解您的报表页面的结构和实现相同的结构。在我的例子中，我的图表是一个2×2的网格，逻辑处理这个相应的。如果你有一个3x2网格或其他不同的东西，那么你将不得不改变定位逻辑。

最后，最终的PDF输出文件尺寸远远大于原始图表页面（来自网页）。我认为这是因为我的图表“容器”div横跨整页。因此，您可能想要使用不同的方法来设置新的canvas的大小。

长期以来，上述示例旨在演示一种方法，而不是您的最终解决方案。

祝你好运！

来源

2017-03-31 16:10:37 jordanwillis

谢谢你的例子。它工作完美。如何添加更多页面，如果内容更多。请帮帮我。 – VSK

带有多个chart.js图表​​的页面到pdf

回答

相关问题

带有多个chart.js图表的页面到pdf