Javascript 包含多个chart.js图表的页面，可转换为pdf格式_Javascript_Pdf_Charts_Chart.js

Javascript 包含多个chart.js图表的页面，可转换为pdf格式

javascript pdf charts chart.js

Javascript 包含多个chart.js图表的页面，可转换为pdf格式,javascript,pdf,charts,chart.js,Javascript,Pdf,Charts,Chart.js,我使用chart.js生成了一个包含多个图表的报告页面。我需要将此报告导出为PDF格式。通过搜索可以找到很多解决方案，但我找不到一个包含多个画布元素的解决方案唯一可用的解决方案似乎是遍历所有图像，并使用这些图像重新创建报告，然后将其作为pdf下载有没有更简单/更有效的方法来实现这一点 <body> <h1> Chart 1 </h1> <div style="width:800px; height:400px;"> <canvas id=

我使用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>

老实说，看起来最简单的方法就是提供一个下载到PDF的链接，弹出浏览器的打印页面，并指示用户选择打印为PDF

如果这种方法不适合您或您的用户，那么这里有一个粗略的方法

基本上，我们创建一个与报表页面大小相同的新画布元素，并将现有chart.js画布图表中的像素增量绘制到新画布中。完成后，您可以使用将新画布作为图像添加到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');
});

你可以在这里看到它的作用

现在，让我们谈谈这种方法的一些缺陷。首先，您必须控制每个chart.js画布在新画布对象中的位置。要做到这一点，唯一的方法是了解报表页面的结构并实现相同的结构。在我的示例中，我的图表位于2x2网格中，逻辑会相应地处理这个问题。如果您有一个3x2网格或其他不同的东西，那么您必须更改定位逻辑

最后，最终的pdf输出文件尺寸比web上的原始图表页面大得多。我认为原因在于我的图表容器div贯穿整个页面。因此，您可能希望使用不同的方法来设置新画布的大小

长话短说，上述示例旨在演示一种方法，而不是最终解决方案

祝你好运

例如，谢谢。它工作得很好。如果内容更多，如何添加更多页面。请帮帮我，这很好。但由于某些原因，图形的质量不是很好。它们非常模糊。有办法解决这个问题吗？