Skip to main content

CSS vs API PDF Controls (Javascript)

This example shows how CSS and API PDF options interact when you use the Raw engine.

Key point: when the same print property is set in both places, template CSS can override API options.

Example A: CSS-first full-bleed​

Use CSS as the primary source of truth for page margins and color rendering.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      @page { margin: 0; }
      html, body { margin: 0; padding: 0; }
      .bleed {
        width: 100vw;
        height: 100vh;
        background: linear-gradient(180deg, #ff3b30 0%, #ff9500 100%);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    </style>
  </head>
  <body>
    <div class="bleed"></div>
  </body>
</html>
{
  "engine": "raw",
  "html_template": "<!doctype html>...",
  "print_background": true,
  "margin": { "top": "0px", "right": "0px", "bottom": "0px", "left": "0px" }
}

Example B: API-first margins​

Use API margin as the primary source of truth and avoid @page margin rules in CSS.

<style>
  html, body { margin: 0; padding: 0; }
  /* No @page margin rule */
</style>
{
  "engine": "raw",
  "html_template": "<!doctype html>...",
  "margin": { "top": "24px", "right": "24px", "bottom": "24px", "left": "24px" },
  "print_background": false
}

Example C: Full request in Node.js​

const fetch = require('node-fetch');
const fs = require('fs');

const API_KEY = 'YOUR_API_KEY';
const htmlTemplate = fs.readFileSync('template.html', 'utf8');

const requestData = {
  engine: 'raw',
  html_template: htmlTemplate,
  print_background: true,
  margin: {
    top: '0px',
    right: '0px',
    bottom: '0px',
    left: '0px',
  },
};

async function generatePDF() {
  const response = await fetch('https://reportgen.io/api/v1/generate-pdf-sync', {
    method: 'POST',
    headers: {
      'X-API-Key': API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestData),
  });

  if (!response.ok) {
    throw new Error(`Error generating PDF: ${response.status} ${response.statusText}`);
  }

  const pdfBuffer = await response.buffer();
  fs.writeFileSync('css_vs_api_full_bleed.pdf', pdfBuffer);
}

generatePDF().catch((err) => {
  console.error(err.message);
});

Use this template.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS vs API PDF Controls</title>
    <style>
      html, body { margin: 0; padding: 0; }
      @page { margin: 0; }
      .bleed {
        width: 100vw;
        height: 100vh;
        background: linear-gradient(180deg, #FF3B30 0%, #FF9500 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Arial, sans-serif;
        font-size: 32px;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <div class="bleed">FULL BLEED TEST</div>
  </body>
</html>

Troubleshooting​

If output does not match your request, check:

  1. Is @page setting margin in CSS?
  2. Is print-color-adjust or -webkit-print-color-adjust set to exact?
  3. Are you setting the same property in both API and CSS?