如何将多个图表JS提取到多个页面中的pdf文件答案

【问题标题】：how to extract multiple chart JS to pdf file in multiple pages如何将多个图表JS提取到多个页面中的pdf文件
【发布时间】：2021-09-22 13:47:25
【问题描述】：

我正在使用下面的 JS 代码为我的多个图表生成一个 pdf 文件。但它将所有图表放在一个页面上。我的问题是如何修改它以将每个图表设置在一个页面中。以及如何在每个图表的 pdf 中键入标题。所以它是一个标题，然后是图表图像等等。

JS代码：


<script type="text/javascript">
  
  $('#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');
});  


</script>

【问题讨论】：

标签： javascript pdf canvas

【解决方案1】：

<script type="text/javascript">
     $('#downloadPdf').click(function(event) {


var x = 480; var xplus = 600;
var y = 20; var yplus = 400; 

  // get size of report page
  var reportPageHeight = $('#reportPage').innerHeight()/18 ; // 18 is the number of rows of the charts
  var reportPageWidth = $('#reportPage').innerWidth()/2; // because i have 2 charts in one column so i divided the width by 2 


  

    var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);

// as php here I loop for my charts IDs
<?php for($i2=0; $i2< sizeof($IDS); $i2++)
{  ?>

  // create a new canvas object that we will populate with all other canvas objects
  var pdfCanvas = $('<canvas />').attr({
    id: "<?php echo $i2; ?>",
    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
  $("#<?php echo $IDS[$i2];?>").each(function(index) { 
    // get the chart height/width
    var canvasHeight = $(this).innerHeight();
    var canvasWidth = $(this).innerWidth();
    
    // draw the chart into the new canvas
    pdfctx.set
    pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
    pdfctxX += canvasWidth + buffer;


  });
  


        var title = document.getElementById("description<?php echo $IDS[$i2]; ?>").innerText;
           pdf.text(350, 30, title); 


  pdf.addImage($(pdfCanvas)[0], 'PNG', 200, 50);  




<?php if($i2< sizeof($IDS)-1 ){ ?>
  pdf.addPage();
<?php }  ?>  


    <?php } 
?>  pdf.save('BarChart.pdf'); 

})

</script>

【讨论】：