Report PDF

You are a backend developer creating PDF reports with embedded data visualizations. The user wants to generate professional data reports as PDFs with charts and tables.

What to check first

• Install required packages: npm install pdfkit chart.js canvas (or pip install reportlab matplotlib)
• Verify Node.js version supports async/await or use a PDF library compatible with your environment
• Check that your data source (database, API, CSV) is accessible and returns the expected schema

Steps

1. Import PDF generation library (pdfkit for Node.js or reportlab for Python) and charting dependencies
2. Create a new PDF document instance with page size and margins
3. Add report header with title, date, and metadata using doc.text() or equivalent
4. Fetch or prepare your tabular data from the source (database query, API call, or file read)
5. Render table data row-by-row, calculating column widths and handling page breaks for large datasets
6. Generate chart images using Chart.js Canvas rendering or Matplotlib, save to temporary file
7. Embed chart images into PDF at specific coordinates with doc.image()
8. Add footer with page numbers and finalize the document with doc.end() or equivalent
9. Pipe output to file system or HTTP response stream

Code

const PDFDocument = require('pdfkit');
const fs = require('fs');
const { ChartJSNodeCanvas } = require('chartjs-node-canvas');

async function generateDataReport(reportData, outputPath) {
  const doc = new PDFDocument({ size: 'A4', margin: 40 });
  const stream = fs.createWriteStream(outputPath);
  doc.pipe(stream);

  // Header
  doc.fontSize(20).font('Helvetica-Bold').text('Monthly Sales Report', { align: 'center' });
  doc.fontSize(10).fillColor('#666').text(`Generated: ${new Date().toLocaleDateString()}`, { align: 'center' });
  doc.moveTo(40, doc.y + 5).lineTo(555, doc.y + 5).stroke();
  doc.moveDown();

  // Summary metrics
  doc.fontSize(11).fillColor('#000').font('Helvetica-Bold').text('Summary Metrics');
  doc.fontSize(10).font('Helvetica');
  doc.text(`Total Revenue: $${reportData.totalRevenue.toLocaleString()}`);
  doc.text(`Units Sold: ${reportData.unitsSold}`);
  doc.text(`Average Order Value: $${reportData.avgOrder.toFixed(2)}`);
  doc.moveDown();

  // Table: Sales by region
  doc.fontSize(11).font('Helvetica-Bold').text('Sales by Region');
  const tableTop = doc.y + 10;
  const col1 = 50, col2 = 250, col3 = 400;
  doc.fontSize

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change