How To Generate A Pdf Using Html And Css

Stuff That Works in Your Browser

These tools work right in your web browser, which is great if you don't want to mess with servers.

• html2pdf.js : This one's pretty cool. It uses two other tools (html2canvas and jsPDF) to make PDFs.
• jsPDF : This one's simpler but still gets the job done.

Good stuff:

• You don't need a server
• Easy to set up

Not so good stuff:

• You can't do as much fancy stuff
• Might be slow on old phones or computers

Stuff That Needs a Server

These tools do the hard work on a server, which is great for making really fancy PDFs.

• Puppeteer : This one uses a headless Chrome browser (fancy way of saying "Chrome without the window") to make PDFs.
• PrinceXML : This is the fancy pants option. It costs money but makes really nice PDFs.

Good stuff:

• You can do more complicated things
• Works better for fancy layouts

Not so good stuff:

• You need to set up a server
• Might cost you some money

Using html2pdf.js

html2pdf.js is pretty cool because it's easy to use but still powerful.

How to get it:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

Or if you're using npm, you can install it like this:

npm install html2pdf.js

Here's a simple example of how to use it:

<!DOCTYPE html>
<html>
<head>
  <title>Make a PDF</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>
<body>
  <div id="invoice">
    <h1>Invoice</h1>
    <p>Here's what you owe us...</p>
  </div>
  
  <button id="download-pdf" class="btn btn-primary">Get Your PDF</button>

  <script>
    document.getElementById('download-pdf').addEventListener('click', () => {
      const element = document.getElementById('invoice');
      const options = {
        margin: 1,
        filename: 'invoice.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };
      html2pdf().set(options).from(element).save();
    });
  </script>
</body>
</html>

What's happening here:

• We pick the part of the page we want to turn into a PDF
• We set up some options like the file name and how it should look
• When you click the button, it makes the PDF and lets you download it

I remember the first time I used this to make an invoice. It was so much easier than messing around in Word for hours!

Trying Out Puppeteer

Puppeteer is great if you want to make really fancy PDFs or if your web page has a lot of complicated stuff going on.

First, you need to install it:

npm install puppeteer

Here's a simple example:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle0' });
  await page.pdf({ path: 'example.pdf', format: 'A4' });
  await browser.close();
})();

What's happening:

• We start up a browser (but you can't see it)
• We tell it to go to a website
• We tell it to make a PDF of that website
• We close the browser

Puppeteer is great if you need to make sure everything looks exactly right, especially if your web page has a lot of JavaScript or complicated layouts.

Playing with jsPDF

jsPDF is super simple to use, which is great if you just need to make a quick PDF without any fuss.

You can add it to your HTML like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

Here's a simple example:

<!DOCTYPE html>
<html>
<head>
  <title>Quick PDF</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
  <button id="make-pdf" class="btn btn-secondary">Make a PDF</button>

  <script>
    document.getElementById('make-pdf').addEventListener('click', function () {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      doc.text("Hello world!", 10, 10);
      doc.save("hello.pdf");
    });
  </script>
</body>
</html>

What's happening:

• We set up jsPDF
• We add some text to the PDF
• We save the PDF

jsPDF is great for simple stuff like making quick reports or tickets.

Keep Your HTML Clean

Your HTML is like the skeleton of your PDF. Keep it neat and tidy:

• Use tags like <header> , <footer> , <section> to organize your content
• Make sure your tags are nested properly
• Try to keep your styles in your CSS file, not in your HTML

It's like organizing your closet - when everything's in its place, it's easier to find what you need!

Make Your CSS Print-Friendly

Remember, PDFs are usually for printing. Make your CSS work for paper:

@media print {
  body {
    font-size: 12pt;
    color: #000;
  }
  .no-print {
    display: none;
  }
}

@page {
  margin: 1in;
}

Set your page margins and keep your layouts simple. Fancy grid systems might not work well in PDFs.

Ever printed a webpage and it looked all messed up? Good print CSS fixes that!

Don't Forget About Pictures

Big pictures can make your PDFs huge and slow:

• Squish your images down to a reasonable size
• Use JPEGs for photos and PNGs for logos and graphics
• Make sure your images load before you make the PDF

Nothing ruins a PDF like blurry pictures!

Watch Out for Page Breaks

Make sure your content doesn't get cut off in weird places:

• Avoid leaving single words at the bottom of a page
• Use CSS to control where pages break:

.new-chapter {
  page-break-before: always;
}

Be consistent with your page breaks. Imagine reading a book where sentences got cut off mid-page - annoying, right?

Fancy Layouts

You can make your PDFs look like professional reports or brochures:

• Use tables or charts to show data
• Add headers and footers:

@page {
  @top-right {
    content: "Page " counter(page) " of " counter(pages);
  }
  @bottom-center {
    content: "Super Secret Company Stuff";
  }
}

You can also add watermarks for extra fanciness:

.watermark {
  position: fixed;
  top: 45%;
  left: 25%;
  opacity: 0.1;
  transform: rotate(-45deg);
  font-size: 100px;
  color: #000;
}

It's like arranging furniture in your house - everything has its place!

Adding Clickable Stuff

Even though PDFs are usually static, you can add some interactive bits:

• Add links so people can jump around the PDF:

<a href="#part2">Go to Part 2</a>

• Make forms people can fill out:

<form>
  <label for="name">Your Name:</label>
  <input type="text" id="name" name="name">
</form>

I once made a survey this way - no more typing in answers by hand!