📚 Tài liệu hướng dẫn

Hướng dẫn tích hợpAPI PDF trong 5 phút

Tích hợp đơn giản với mọi ngôn ngữ lập trình. Chỉ cần gửi HTML, nhận về PDF.

Các bước tích hợp

Bước 1

Đăng ký tài khoản

Tạo tài khoản miễn phí để nhận 500 lượt tạo PDF mỗi tháng.

Đăng ký ngay
Bước 2

Lấy API Key

Vào Dashboard để tạo và quản lý API Key của bạn.

Vào Dashboard
Bước 3

Tạo HTML Template

Thiết kế template HTML với CSS để định dạng PDF theo ý muốn.

Xem Demo
Bước 4

Gọi API

Gửi request POST với HTML template và nhận file PDF.

Xem code

Ví dụ code mẫu

Chọn ngôn ngữ lập trình bạn đang sử dụng

// Vanilla JavaScript
const apiKey = 'YOUR_API_KEY';
const html = '<h1>Xin chào!</h1><p>Nội dung PDF của bạn</p>';
const response = await fetch('https://pdf.toolapp.name.vn/api/generate-pdf', {
  method: 'POST',
  headers: {
    'Content-Type''application/json',
    'x-api-key': apiKey
  },
  body: JSON.stringify({ html })
});
if (response.ok) {
  const blob = await response.blob();
  
  // Download file
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'document.pdf';
  a.click();
  URL.revokeObjectURL(url);
}

Tham khảo API

📤 Request

Endpoint:POST /api/generate-pdf
Headers:
  • Content-Type: application/json
  • x-api-key: YOUR_API_KEY
Body:
{
  "html": "<h1>Nội dung HTML</h1>"
}

📥 Response

200 OK:

File PDF binary (Content-Type: application/pdf)

Response Headers:
  • X-RateLimit-Limit - Giới hạn tháng
  • X-RateLimit-Remaining - Lượt còn lại
  • X-Response-Time - Thời gian xử lý
Error Codes:
  • 401 - Thiếu API key
  • 403 - API key không hợp lệ
  • 429 - Hết lượt sử dụng
  • 500 - Lỗi server

💡 Mẹo viết HTML Template

✅ Nên làm

  • •Sử dụng @page để định nghĩa khổ giấy
  • •Inline CSS hoặc <style> trong <head>
  • •Font system như Arial, Times New Roman
  • •Đơn vị tương đối như %, em, rem cho responsive
  • •Base64 images để đảm bảo hiển thị

❌ Không nên

  • •Link CSS external (có thể không load được)
  • •JavaScript (không được thực thi)
  • •Font đặc biệt chưa được embed
  • •Images từ URL external không ổn định
  • •CSS animations (không hiển thị trong PDF)

📄 Template mẫu cơ bản

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <style>
    @page { size: A4; margin: 15mm; }
    body { font-family: Arial, sans-serif; font-size: 14px; }
    .header { text-align: center; margin-bottom: 30px; }
    .title { font-size: 24px; color: #2563eb; }
    table { width: 100%; border-collapse: collapse; }
    th, td { border: 1px solid #ddd; padding: 10px; }
    th { background: #3b82f6; color: white; }
  </style>
</head>
<body>
  <div class="header">
    <h1 class="title">TIÊU ĐỀ TÀI LIỆU</h1>
  </div>
  <!-- Nội dung của bạn -->
</body>
</html>

📐 Hướng dẫn @page rule

Sử dụng @page trong CSS để điều khiển kích thước, hướng và lề của trang PDF.

📏 Kích thước trang (size)

size: A4;Khổ A4 dọc (210mm × 297mm)
size: A4 landscape;Khổ A4 ngang (297mm × 210mm)
size: A3;Khổ A3 (297mm × 420mm)
size: A5;Khổ A5 (148mm × 210mm)
size: letter;Letter US (216mm × 279mm)
size: 100mm 150mm;Kích thước tùy chỉnh (W × H)

📐 Khoảng cách lề (margin)

margin: 15mm;Lề đều 4 phía
margin: 10mm 20mm;Trên/dưới, trái/phải
margin: 10mm 15mm 20mm;Trên, trái/phải, dưới
margin: 10mm 15mm 20mm 15mm;Trên, phải, dưới, trái
margin-top: 20mm;Chỉ lề trên
margin-bottom: 25mm;Chỉ lề dưới

💡 Ví dụ cơ bản

Hóa đơn A4 dọc:

@page {
  size: A4;
  margin: 15mm;
}

Báo cáo A4 ngang:

@page {
  size: A4 landscape;
  margin: 10mm 20mm;
}

🔢 Đánh số trang & Header/Footer (Nâng cao)

Sử dụng margin boxes để thêm số trang, tiêu đề, footer vào vùng lề của PDF.

📍 Vị trí margin box

@top-leftGóc trên trái
@top-centerGiữa trên (tiêu đề)
@top-rightGóc trên phải
@bottom-leftGóc dưới trái
@bottom-centerGiữa dưới
@bottom-rightGóc dưới phải

🔢 Hàm đếm trang

counter(page)Số trang hiện tại
counter(pages)Tổng số trang
Thuộc tính có thể dùng:
  • content - Nội dung hiển thị
  • font-size - Cỡ chữ
  • font-family - Font chữ
  • font-weight - Độ đậm
  • color - Màu chữ

📝 Ví dụ nâng cao

Số trang góc dưới phải:

@page {
  size: A4;
  margin: 15mm;
  @bottom-right {
    content: "Trang " counter(page) 
             "/" counter(pages);
    font-size: 9pt;
    font-family: "Times New Roman", serif;
  }
}

Tiêu đề + số trang:

@page {
  size: A4;
  margin: 20mm 15mm;
  @top-center {
    content: "BÁO CÁO DOANH THU";
    font-size: 10pt;
    font-weight: bold;
    color: #2563eb;
  }
  @bottom-center {
    content: counter(page);
    font-size: 9pt;
  }
}

Header trái/phải + Footer:

@page {
  size: A4;
  margin: 20mm;
  @top-left {
    content: "Công ty ABC";
    font-size: 9pt;
  }
  @top-right {
    content: "Ngày: 12/01/2025";
    font-size: 9pt;
  }
  @bottom-right {
    content: "Trang " counter(page);
    font-size: 9pt;
  }
}

Hợp đồng với footer công ty:

@page {
  size: A4;
  margin: 25mm 20mm 30mm 20mm;
  @bottom-center {
    content: "Công ty TNHH XYZ - "
             "ĐT: 028.1234.5678";
    font-size: 8pt;
    color: #666;
  }
  @bottom-right {
    content: counter(page) "/" 
             counter(pages);
    font-size: 8pt;
  }
}

Sẵn sàng bắt đầu?

Thử ngay trang Demo để xem API hoạt động như thế nào

Thử Demo ngayĐăng ký miễn phí