Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

214
Views
cómo extraer múltiples gráficos JS a un archivo pdf en varias páginas

Estoy usando el código JS a continuación para generar un archivo pdf para mis gráficos múltiples. Pero pone todos los gráficos en una sola página. Mi pregunta es cómo puedo modificarlo para configurar cada gráfico en una sola página. ¿Y cómo puedo escribir un título en el pdf para cada gráfico? Entonces es un título, luego una imagen del gráfico y así sucesivamente.

Código 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>
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

<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>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!