Collecting data JSON to pass it to HTML tamplate to create PDF doc

Ask for Help
1

Hello.I have two table. Offers and Items in offer. In Offers table i get related data from Items in offer. So i generate PDF file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Special Offer</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;700&display=swap" rel="stylesheet">
<style>
body {
  margin: 10px;
  font-family: 'Raleway', sans-serif;
}

header {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  padding: 10px;
}

.logo img {
  max-width: 100px;
  height: auto;
  margin-right: 20px;
  width: 100%;
  max-width: 100px;
}

.company-details h1, .main-title h1 {
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: bold;
}

.company-details p, .main-title h1 {
  margin: 5px 0;
  font-weight: 300;
}

.main-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-top: 40px;
  padding: 10px;
  background-color: #f8f8f8;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f0f0f0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const products = [
    { name: "Product A", region: "North", memory: "16GB", price: "$199", quantity: 10 },
    { name: "Product B", region: "South", memory: "32GB", price: "$299", quantity: 15 },
    { name: "Product C", region: "East", memory: "64GB", price: "$399", quantity: 5 }
  ];

  const tableBody = document.querySelector('table tbody');
  products.forEach(product => {
    const row = tableBody.insertRow();
    row.insertCell(0).textContent = product.name;
    row.insertCell(1).textContent = product.region;
    row.insertCell(2).textContent = product.memory;
    row.insertCell(3).textContent = product.price;
    row.insertCell(4).textContent = product.quantity;
  });
});
</script>
</head>
<body>
<header>
  <div class="logo">
    <img src="https://res.cloudinary.com/glide/image/fetch/f_auto,w_600,c_limit/https%3A%2F%2Fstorage.googleapis.com%2Fglide-prod.appspot.com%2Fuploads-v2%2FXjMthrjGG2TFYRnabQLv%2Fpub%2FT93W4O3NBG7ZwjWT4PdH.png" alt="Company Logo">
  </div>
  <div class="company-details">
    <h1>Company Name</h1>
    <p>Address: 1234 Street</p>
    <p>Phone: (123) 456-7890</p>
  </div>
</header>
<div class="main-title">
  <h1>Special Price Offer</h1>
</div>
<table>
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Region</th>
      <th>Memory</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <!-- Rows will be added here dynamically -->
  </tbody>
</table>
</body>
</html>

I have this HTML template. in Items in offer table i have data like “product name” “region” “price” quantity" “color” how do i wrap these data in Items in offer table so i can pass it to the Offers table to dynamically generate list of products and create a pdf. Thanks in advance.

2

How would you generate a PDF using this though? Are you using AppsScript, JavaScript or sth else?

3

HTML2PDF Im using this technique. But the thiing is he is showing dynamic data inside ul/li it is also usefull but i want ot create a more pretty PDF doc with table and header, so that is why im curious about my question

4

You would create your HTML for each item in the a items table. Then in the Offers table, use a Joined List column to retrieve a list of all the related item HTML from the relation to the Items table.

Just make sure to use carriage return (enter key) as you delimiter in the Joined List column.

4 Likes