Generating PDF Reports with Screenshots

01const PDFDocument = require('pdfkit');
02const fs = require('fs');
03const axios = require('axios');
04
05async function generateReport(url, apiKey) {
06  // Get screenshot from API
07  const response = await axios.post('https://api.screenshotapi.com/capture', {
08    url,
09    fullPage: true,
10    format: 'png'
11  }, {
12    headers: {
13      'Authorization': `Bearer ${apiKey}`
14    }
15  });
16  
17  const screenshotUrl = response.data.screenshotUrl;
18  const imageResponse = await axios.get(screenshotUrl, { responseType: 'arraybuffer' });
19  const imageBuffer = Buffer.from(imageResponse.data);
20  
21  // Create PDF
22  const doc = new PDFDocument({ margin: 50 });
23  doc.pipe(fs.createWriteStream('website-report.pdf'));
24  
25  // Add title
26  doc.fontSize(25).text('Website Screenshot Report', { align: 'center' });
27  doc.moveDown();
28  
29  // Add URL and date
30  doc.fontSize(14).text(`URL: ${url}`);
31  doc.fontSize(12).text(`Generated: ${new Date().toLocaleString()}`);
32  doc.moveDown();
33  
34  // Add screenshot
35  const imgWidth = doc.page.width - 100;
36  doc.image(imageBuffer, 50, doc.y, { width: imgWidth });
37  
38  doc.end();
39  return 'website-report.pdf';
40}

01import { jsPDF } from 'jspdf';
02
03async function generateReport(url, apiKey) {
04  // Get screenshot from API
05  const response = await fetch('https://api.screenshotapi.com/capture', {
06    method: 'POST',
07    headers: {
08      'Content-Type': 'application/json',
09      'Authorization': `Bearer ${apiKey}`
10    },
11    body: JSON.stringify({
12      url,
13      fullPage: false,
14      width: 1280,
15      height: 800
16    })
17  });
18  
19  const data = await response.json();
20  
21  // Load the image
22  return new Promise((resolve) => {
23    const img = new Image();
24    img.crossOrigin = 'Anonymous';
25    img.onload = () => {
26      // Create PDF
27      const doc = new jsPDF({
28        orientation: 'landscape',
29        unit: 'px',
30        format: [1000, 700]
31      });
32      
33      // Add title
34      doc.setFontSize(24);
35      doc.text('Website Screenshot Report', 500, 30, { align: 'center' });
36      
37      // Add URL and date
38      doc.setFontSize(12);
39      doc.text(`URL: ${url}`, 50, 60);
40      doc.text(`Generated: ${new Date().toLocaleString()}`, 50, 80);
41      
42      // Add screenshot (resized to fit)
43      const imgWidth = 900;
44      const imgHeight = (img.height * imgWidth) / img.width;
45      doc.addImage(img, 'PNG', 50, 100, imgWidth, imgHeight);
46      
47      // Save PDF
48      doc.save('website-report.pdf');
49      resolve('website-report.pdf');
50    };
51    img.src = data.screenshotUrl;
52  });
53}

01async function generateComparisonReport(urls, apiKey) {
02  const doc = new PDFDocument({ margin: 50 });
03  doc.pipe(fs.createWriteStream('comparison-report.pdf'));
04  
05  // Add title
06  doc.fontSize(25).text('Website Comparison Report', { align: 'center' });
07  doc.moveDown();
08  
09  // Process each URL
10  for (const url of urls) {
11    // Get screenshot
12    const response = await axios.post('https://api.screenshotapi.com/capture', {
13      url,
14      fullPage: false,
15      width: 1280,
16      height: 800
17    }, {
18      headers: {
19        'Authorization': `Bearer ${apiKey}`
20      }
21    });
22    
23    const screenshotUrl = response.data.screenshotUrl;
24    const imageResponse = await axios.get(screenshotUrl, { responseType: 'arraybuffer' });
25    const imageBuffer = Buffer.from(imageResponse.data);
26    
27    // Add a new page for each screenshot (except the first one)
28    if (url !== urls[0]) {
29      doc.addPage();
30    }
31    
32    // Add URL
33    doc.fontSize(14).text(`URL: ${url}`);
34    doc.moveDown();
35    
36    // Add screenshot
37    const imgWidth = doc.page.width - 100;
38    doc.image(imageBuffer, 50, doc.y, { width: imgWidth });
39  }
40  
41  doc.end();
42  return 'comparison-report.pdf';
43}

01async function generateAnalyticsReport(url, analyticsData, apiKey) {
02  // Similar setup to previous examples...
03  
04  // Add analytics charts and data
05  doc.fontSize(18).text('Performance Metrics', 50, 500);
06  doc.fontSize(12).text(`Page Load Time: ${analyticsData.loadTime}ms`, 50, 530);
07  doc.fontSize(12).text(`First Contentful Paint: ${analyticsData.fcp}ms`, 50, 550);
08  doc.fontSize(12).text(`Largest Contentful Paint: ${analyticsData.lcp}ms`, 50, 570);
09  
10  // Add more data and visualizations as needed...
11  
12  doc.end();
13}