PDF Maker Web Component

A lightweight, framework-agnostic web component for converting HTML to PDF.

Features

• 🚀 Zero dependencies
• 📱 Framework agnostic (works with React, Vue, Angular, vanilla JS)
• 🎨 Customizable with CSS custom properties
• 📝 TypeScript support
• 🔧 Rich API with events and methods

Installation

npm install @devm7mdali/pdf-maker

Usage

Vanilla HTML

<script type="module" src="./src/pdf-maker.js"></script>
<pdf-maker 
  endpoint="https://api.example.com/pdf"
  api-key="your-key"
  filename="document.pdf">
</pdf-maker>

React

import './path/to/pdf-maker.js';

function App() {
  return (
    <pdf-maker 
      endpoint="https://api.example.com/pdf"
      filename="react-document.pdf"
      style={{'--pdf-primary-color': '#059669'}}
    />
  );
}

API

Attributes

• api-key: API key for authentication
• endpoint: PDF generation endpoint URL
• filename: Default filename for downloaded PDF
• orientation: PDF orientation ('portrait' | 'landscape')
• placeholder: Textarea placeholder text

Properties

• html: Get/set HTML content
• loading: Read-only loading state
• status: Read-only status message

Methods

• generatePDF(): Programmatically generate PDF

Events

• pdf-maker:start: Fired when generation starts
• pdf-maker:success: Fired when PDF is generated
• pdf-maker:error: Fired when generation fails

CSS Custom Properties

• --pdf-primary-color: Button color
• --pdf-border-color: Border color
• --pdf-border-radius: Border radius
• --pdf-font-family: Font family
• --pdf-mono-family: Monospace font family