DomPDF.js

Interactive Demo

Try different PDF generation examples

jsPDF Text and Image Generation Demo

jsPDF is a powerful JavaScript library for generating PDF documents with text and images directly in the browser.

Text Generation Features

It supports various text styles and formats:

Bold text - for important content
Italic text - for emphasis and quotes
Colored text - for rich visual effects
Different font sizes - for clear typography

Image Generation Features

Here is an example of an image rendered in the PDF:

Mixed Content Example

Product Showcase

This is an example of mixed content with both text and images. jsPDF can handle various HTML elements, including:

Headings and paragraphs
Lists and tables
Images and icons
Styles and layouts

Tip: Click the "Generate PDF " button above to convert this page into a PDF document and see the perfect rendering of text and images!

Data Table

Export structured table data to formatted PDF documents.

Name	Age	Position	Department	Salary
Zhang San	28	Frontend Developer	Technology	¥15,000
Li Si	32	Product Manager	Product	¥18,000
Wang Wu	29	UI Designer	Design	¥12,000

Complex Tables

Demonstration of various complex table layouts and formatting options.

1. Merged Cells Table

Employee	Q1 Performance		Q2 Performance		Total
Employee	Sales	Rating	Sales	Rating	Total
Alice Johnson	¥120,000	A	¥135,000	A+	¥255,000
Bob Smith	¥98,000	B+	¥110,000	A	¥208,000
Carol Davis	¥85,000	B	¥92,000	B+	¥177,000
Total	¥303,000		¥337,000		¥640,000

2. Styled Financial Report

Account	2023 Q3	2023 Q4	Change	Status
Revenue	¥2,450,000	¥2,680,000	+9.4%	UP
Operating Costs	¥1,680,000	¥1,720,000	+2.4%	STABLE
Gross Profit	¥770,000	¥960,000	+24.7%	UP
Net Income	¥520,000	¥680,000	+30.8%	UP

3. Nested Table Structure

Department

Manager

Team Details

Budget

Engineering

John Doe

Role	Count
Senior Dev	5
Junior Dev	8

¥2,400,000

Jane Smith

Role	Count
QA Engineer	4
DevOps	2

¥800,000

Marketing

Mike Wilson

Role	Count
Marketing Specialist	6
Content Creator	3

¥1,200,000

4. Data Analysis Table

Metric	Jan	Feb	Mar	Avg	Trend
Page Views	125,430	138,920	142,650	135,667	+13.7%
Unique Users	45,230	48,920	52,180	48,777	+15.4%
Bounce Rate	32.5%	29.8%	27.2%	29.8%	-16.3%
Conversion Rate	2.8%	3.2%	3.6%	3.2%	+28.6%

Professional Resume

Create professional resumes with structured formatting.

Personal Information

Name: Wang Xiaoming

Position: Senior Frontend Developer

Email: wangxiaoming@email.com

Phone: 138-0000-0000

Location: Shanghai, China

LinkedIn: linkedin.com/in/wangxiaoming

Work Experience

Senior Frontend Engineer | ABC Technology Co., Ltd. | 2021.03 - Present

Led a team of 5 developers in developing a large-scale SaaS platform
Built high-performance web applications using React and Vue.js
Optimized page loading speed, improving user experience by 30%
Mentored junior developers and established frontend development standards

Frontend Developer | XYZ Software Inc. | 2019.06 - 2021.02

Developed responsive web applications using modern JavaScript frameworks
Implemented CI/CD pipelines reducing deployment time by 50%
Collaborated with UX team to improve user interface designs

Education

Master of Computer Science | Shanghai University | 2016 - 2019

GPA: 3.8/4.0 | Focus: Software Engineering

Skills

JavaScript /TypeScript

React /Vue.js

Node.js

Webpack /Vite

CSS /Sass

Git /GitHub

Docker

AWS /Cloud

GraphQL

Testing

Box Shadow Demo

This is a demonstration of box shadow effects that can be converted to PDF:

Light Shadow

Subtle elevation effect

Medium Shadow

Moderate elevation

Heavy Shadow

Strong elevation

Complex Shadow

Combined effects with multiple layers

Data Visualization

Convert charts and graphs to PDF with high-quality rendering.