lightweight-html2pdf
Advanced tools
A lightweight, fast browser module for converting HTML to PDF with advanced styling support, customizable options, and comprehensive testing
A lightweight, fast browser module for converting HTML to PDF with advanced styling support, customizable options, and comprehensive testing.
🚀 All dependencies bundled together - no external scripts needed!
npm install lightweight-html2pdf
<html>
<body id="convert_to_pdf">
<h1>Hello World!</h1>
<p>This is a test document.</p>
</body>
</html>
import { htmlToPdf } from 'lightweight-html2pdf';
const result = await htmlToPdf({
id: "convert_to_pdf",
outputPath: 'output.pdf',
pageSize: 'A4',
orientation: 'portrait'
});
if (result.success) {
console.log(`PDF created successfully: ${result.outputPath}`);
} else {
console.error(`Error: ${result.error}`);
}
const { htmlToPdf } = require('lightweight-html2pdf');
async function convertToPdf() {
const result = await htmlToPdf({
id: "convert_to_pdf",
outputPath: 'output.pdf',
pageSize: 'A4',
orientation: 'portrait'
});
if (result.success) {
console.log(`PDF created successfully: ${result.outputPath}`);
} else {
console.error(`Error: ${result.error}`);
}
}
convertToPdf();
import { htmlToPdf } from 'lightweight-html2pdf';
const result = await htmlToPdf({
id: "convert_to_pdf",
outputPath: 'custom.pdf',
pageSize: 'A3',
orientation: 'landscape',
widthOffset: 10,
heightOffset: 10
});
const { htmlToPdf } = require('lightweight-html2pdf');
async function convertWithOptions() {
const result = await htmlToPdf({
id: "convert_to_pdf",
outputPath: 'custom.pdf',
pageSize: 'A3',
orientation: 'landscape',
widthOffset: 10,
heightOffset: 10
});
return result;
}
For direct browser usage without build tools:
<!DOCTYPE html>
<html>
<head>
<title>HTML to PDF</title>
<!-- All dependencies bundled - no external scripts needed! -->
</head>
<body>
<div id="content-to-convert">
<h1>Hello World!</h1>
<p>This will be converted to PDF</p>
</div>
<button onclick="convertToPdf()">Download PDF</button>
<script type="module">
import { htmlToPdf } from 'https://unpkg.com/lightweight-html2pdf/dist/index.js';
window.convertToPdf = async function() {
const result = await htmlToPdf({
id: 'content-to-convert',
outputPath: 'my-document.pdf'
});
if (result.success) {
console.log('PDF downloaded!');
}
};
</script>
</body>
</html>
Note: This package is designed specifically for browser environments. All dependencies (html2canvas and jsPDF) are bundled together - no external scripts needed!
For React applications, you can easily integrate the PDF conversion.
import React from 'react';
import { htmlToPdf } from 'lightweight-html2pdf';
function MyComponent() {
const handleDownloadPDF = async () => {
const result = await htmlToPdf({
id: 'pdf-content',
outputPath: 'my-react-document.pdf',
pageSize: 'A4',
orientation: 'portrait'
});
if (result.success) {
console.log('PDF downloaded successfully!');
} else {
console.error('Failed to generate PDF:', result.error);
}
};
return (
<div>
<div id="pdf-content">
<h1>My React Content</h1>
<p>This content will be converted to PDF</p>
<div style={{ color: 'blue', fontSize: '18px' }}>
Styled content works too!
</div>
</div>
<button onClick={handleDownloadPDF}>
Download as PDF
</button>
</div>
);
}
export default MyComponent;
import { useState } from 'react';
import { htmlToPdf } from 'lightweight-html2pdf';
// Custom hook for PDF generation
function usePdfGenerator() {
const [isGenerating, setIsGenerating] = useState(false);
const [error, setError] = useState(null);
const generatePdf = async (elementId, filename = 'document.pdf', options = {}) => {
setIsGenerating(true);
setError(null);
try {
const result = await htmlToPdf({
id: elementId,
outputPath: filename,
pageSize: 'A4',
orientation: 'portrait',
...options
});
if (!result.success) {
throw new Error(result.error);
}
return result;
} catch (err) {
setError(err.message);
throw err;
} finally {
setIsGenerating(false);
}
};
return { generatePdf, isGenerating, error };
}
// Usage in component
function DocumentComponent() {
const { generatePdf, isGenerating, error } = usePdfGenerator();
const handleExport = async () => {
try {
await generatePdf('document-content', 'my-report.pdf', {
pageSize: 'A3',
orientation: 'landscape'
});
alert('PDF downloaded successfully!');
} catch (err) {
alert('Failed to generate PDF');
}
};
return (
<div>
<div id="document-content">
<h2>Report Content</h2>
<p>Your report data here...</p>
</div>
<button onClick={handleExport} disabled={isGenerating}>
{isGenerating ? 'Generating PDF...' : 'Export to PDF'}
</button>
{error && <p style={{ color: 'red' }}>Error: {error}</p>}
</div>
);
}
import React from 'react';
import { htmlToPdf, HtmlToPdfOptions, HtmlToPdfResult } from 'lightweight-html2pdf';
interface PDFButtonProps {
elementId: string;
filename?: string;
options?: Partial<HtmlToPdfOptions>;
onSuccess?: (result: HtmlToPdfResult) => void;
onError?: (error: string) => void;
}
const PDFButton: React.FC<PDFButtonProps> = ({
elementId,
filename = 'document.pdf',
options = {},
onSuccess,
onError
}) => {
const [loading, setLoading] = React.useState(false);
const handleClick = async () => {
setLoading(true);
try {
const result = await htmlToPdf({
id: elementId,
outputPath: filename,
pageSize: 'A4',
orientation: 'portrait',
...options
});
if (result.success) {
onSuccess?.(result);
} else {
onError?.(result.error || 'Unknown error');
}
} catch (error) {
onError?.(error instanceof Error ? error.message : 'Unknown error');
} finally {
setLoading(false);
}
};
return (
<button onClick={handleClick} disabled={loading}>
{loading ? 'Generating...' : 'Download PDF'}
</button>
);
};
// Usage - Just pass the element ID!
function App() {
return (
<div>
<div id="my-content">
<h1>Hello from React!</h1>
<p>This will be converted to PDF</p>
</div>
<PDFButton
elementId="my-content"
filename="react-document.pdf"
options={{ pageSize: 'A4', orientation: 'portrait' }}
onSuccess={() => console.log('PDF generated!')}
onError={(error) => console.error('Error:', error)}
/>
</div>
);
}
htmlToPdf(options: HtmlToPdfOptions): Promise<HtmlToPdfResult>Converts HTML content to PDF format.
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | ID of html element to convert to PDF |
outputPath | string | required | Output file path |
pageSize | 'A4' | 'A3' | 'Letter' | 'Legal' | 'A4' | Page size |
orientation | 'portrait' | 'landscape' | 'portrait' | Page orientation |
widthOffset | number | 0 | Offset from page width |
heightOffset | number | 0 | Offset from page height |
Returns a promise that resolves to an object with:
success: boolean - Whether the conversion was successfuloutputPath?: string - Path to the generated PDF file (if successful)error?: string - Error message (if failed)This package is designed with simplicity in mind:
npm install
Note: This package is designed for browser environments. The development setup includes testing infrastructure but the core functionality works immediately since all dependencies are bundled together.
npm run build - Build the TypeScript codenpm run dev - Watch mode for developmentnpm test - Run testsnpm run lint - Run ESLintnpm run clean - Clean build directorynpm run build
The compiled JavaScript will be output to the dist/ directory.
This project includes comprehensive testing with both automated Jest tests and browser-based testing capabilities.
Run the test suite:
npm test
Run tests with coverage:
npm test -- --coverage
The test suite covers the following scenarios:
| Test Case | Description | Expected Result |
|---|---|---|
| Basic Conversion | Tests successful HTML to PDF conversion | ✅ Success with lightweight-html2pdf.pdf |
| Empty ID Validation | Tests error handling for missing element ID | ❌ Error: "The id of the html element is required" |
| Default Values | Tests default option handling | ✅ Success with default settings |
| Custom Page Settings | Tests A3 landscape with offsets | ✅ Success with custom page configuration |
| Width/Height Offsets | Tests margin offset functionality | ✅ Success with offset calculations |
For manual testing and visual verification, use the included HTML test files:
simple-test.html)A comprehensive test page with advanced CSS styling:
lightweight-html2pdf.pdfAccess: http://localhost:8080/simple-test.html
demo.html)Advanced testing interface with multiple conversion options:
Access: http://localhost:8080/demo.html
Start Local Server:
npx http-server . -p 8080 -c-1
Access Test Pages:
http://localhost:8080/simple-test.htmlhttp://localhost:8080/demo.htmlTest PDF Generation:
thisisawesome.pdf{
"devDependencies": {
"jest": "^29.0.0",
"ts-jest": "^29.0.0",
"jest-environment-jsdom": "^29.0.0",
"@types/jest": "^29.0.0"
}
}
Testing Philosophy: Since this is a browser-only package, tests focus on validating the module structure, TypeScript interfaces, and function signatures rather than complex runtime behavior that requires browser APIs.
Run Automated Tests:
npm test # Run all tests
npm test -- --watch # Watch mode for development
npm test -- --coverage # Generate coverage report
Start Browser Testing:
npx http-server . -p 8080 -c-1
Test in Browser:
http://localhost:8080/simple-test.htmllightweight-html2pdf.pdfVerify Results:
MIT License - see LICENSE file for details.
All dependencies are bundled together! No need to install html2canvas or jsPDF separately:
These are only needed if you're contributing to the package or want TypeScript support:
# Install the package (includes all dependencies)
npm install lightweight-html2pdf
# For development/contributing only:
npm install --save-dev typescript jest ts-jest jest-environment-jsdom @types/jest eslint
If you encounter any issues or have questions, please open an issue on GitHub.
FAQs
A lightweight, fast browser module for converting HTML to PDF with advanced styling support, customizable options, and comprehensive testing
The npm package lightweight-html2pdf receives a total of 5 weekly downloads. As such, lightweight-html2pdf popularity was classified as not popular.
We found that lightweight-html2pdf demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.
Security News
OpenSSF has issued a high-severity advisory warning open source developers of an active Slack-based campaign using impersonation to deliver malware.