HTMLtoPDFWidgets

https://pub.dev/packages/htmltopdfwidgets
Admin
A Dart/Flutter package that converts HTML and Markdown rich text content into high-quality PDF...
Tokens:4,132
Snippets:61
Trust Score:9.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### HTML to PDF Widgets Installation

Source: https://pub.dev/packages/htmltopdfwidgets

Add the htmltopdfwidgets package to your pubspec.yaml file to include it in your project dependencies.

```yaml
dependencies:
  htmltopdfwidgets: ^2.1.0

```

--------------------------------

### Import htmltopdfwidgets in Dart Code

Source: https://pub.dev/packages/htmltopdfwidgets/install

Import the package into your Dart files to start using its functionalities.

```dart
import 'package:htmltopdfwidgets/htmltopdfwidgets.dart';
```

--------------------------------

### Create PDF Document from HTML

Source: https://pub.dev/packages/htmltopdfwidgets/example

This snippet demonstrates how to create a PDF document using the htmltopdfwidgets package. It takes a complex HTML string with various elements and styles and converts it into a PDF.

```dart
import "dart:io";

import "package:htmltopdfwidgets/htmltopdfwidgets.dart";

void main() {
  createDocument();
}

const htmlText = '''<h1>AppFlowyEditor</h1>
<h2>👋 <strong>Welcome to</strong> <strong><em><a href="appflowy.io">AppFlowy Editor</a></em></strong></h2>
  <p>AppFlowy Editor is a <strong>highly customizable</strong> <em>rich-text editor</em></p>
<hr />
<p><u>Here</u> is an example <del>your</del> you can give a try</p>
<br>
<span style="font-weight: bold;background-color: #cccccc;font-style: italic;">Span element</span>
<span style="font-weight: medium;text-decoration: underline;">Span element two</span>
</br>
<span style="font-weight: 900;text-decoration: line-through;">Span element three</span>
<a href="https://appflowy.io">This is an anchor tag!</a>
<img src="https://images.squarespace-cdn.com/content/v1/617f6f16b877c06711e87373/c3f23723-37f4-44d7-9c5d-6e2a53064ae7/Asset+10.png?format=1500w" />
<h3>Features!</h3>
<ul>
  <li>[x] Customizable</li>
  <li>[x] Test-covered</li>
  <li>[ ] more to come!</li>
</ul>
<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
<li>List element</li>
<blockquote>
  <p>This is a quote!</p>
</blockquote>
<code>
  Code block
</code>
<em>Italic one</em> <i>Italic two</i>
<b>Bold tag</b>
<img src="http://appflowy.io" alt="AppFlowy">
<p>You can also use <strong><em>AppFlowy Editor</em></strong> as a component to build your own app.</p>
<h3>Awesome features</h3>

<p>If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!</p>
  <h3>Checked Boxes</h3>
 <input type="checkbox" id="option2" checked> 
  <label for="option2">Option 2</label>
  <input type="checkbox" id="option3"> 
  <label for="option3">Option 3</label>
  <div style="font-family: Arial, sans-serif; line-height: 1.6;">
    <div style="background-color: #2c3e50; color: #ffffff; padding: 40px; text-align: center; border-bottom: 5px solid #e74c3c;">
        <h1 style="font-size: 36px; margin: 0;">Stress Test: Long Styled Content</h1>
        <p style="font-size: 18px; color: #ecf0f1;">Testing pagination and style persistence across page breaks</p>
    </div>


```

--------------------------------

### Add htmltopdfwidgets Dependency (Dart)

Source: https://pub.dev/packages/htmltopdfwidgets/install

Use this command to add the package as a dependency in your Dart project.

```bash
$ dart pub add htmltopdfwidgets
```

--------------------------------

### Add htmltopdfwidgets Dependency (Flutter)

Source: https://pub.dev/packages/htmltopdfwidgets/install

Use this command to add the package as a dependency in your Flutter project.

```bash
$ flutter pub add htmltopdfwidgets
```

--------------------------------

### Convert HTML to PDF Widgets using Modern Engine

Source: https://pub.dev/packages/htmltopdfwidgets

Use the modern browser engine for accurate rendering of complex HTML and CSS. Ensure the 'useNewEngine' flag is set to true.

```dart
import 'package:htmltopdfwidgets/htmltopdfwidgets.dart';

final String htmlContent = '''
  <div style="padding: 24px; background-color: #f8f9fa; border: 2px solid #007bff; border-radius: 8px;">
    <h1 style="color: #007bff; text-align: center;">Invoicing Simplified</h1>
    <div style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 20px;">
      <div style="flex-grow: 1;">
        <p><b>Client:</b> John Doe</p>
        <p><b>Date:</b> April 16, 2024</p>
      </div>
      <div style="width: 150px; text-align: right;">
        <p style="font-size: 24px;">$1,250.00</p>
      </div>
    </div>
  </div>
''';

void main() async {
  final widgets = await HTMLToPdf().convert(
    htmlContent,
    useNewEngine: true, // Unleash the Layout-First power
  );

  final pdf = Document();
  pdf.addPage(MultiPage(build: (context) => widgets));
  
  // Save or preview your PDF
}


```

--------------------------------

### Convert Markdown to PDF Widgets

Source: https://pub.dev/packages/htmltopdfwidgets

Directly convert Markdown rich text into a list of PDF widgets for structured PDF documents. This method is useful for content primarily in Markdown format.

```dart
final markDown = '''
# 📖 Project Documentation
---
> Building better PDFs together.

### Features
- [x] High-performance rendering
- [x] **Flexbox** support
- [x] Custom font fallbacks
''';

final List<Widget> widgets = await HTMLToPdf().convertMarkdown(markDown);


```

--------------------------------

### Convert HTML to PDF Widgets

Source: https://pub.dev/packages/htmltopdfwidgets/example

Converts an HTML string into a list of PDF widgets. Use wrapInParagraph to control paragraph wrapping.

```dart
import 'dart:io';
import 'package:htmltopdfwidgets/htmltopdfwidgets.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;

createDocument() async {
  const filePath = 'html_example.pdf';
  final file = File(filePath);
  final newpdf = pw.Document();
  final List<pw.Widget> widgets = await HTMLToPdf().convert(htmlText, wrapInParagraph: true);
  newpdf.addPage(pw.MultiPage(
      maxPages: 200,
      build: (context) {
        return widgets;
      }));
  await file.writeAsBytes(await newpdf.save());
}
```

--------------------------------

### Global Language Support and Emojis

Source: https://pub.dev/packages/htmltopdfwidgets

Enable rendering of emojis and non-Latin scripts by providing fallback fonts using the fontFallback parameter. Ensure necessary font files are available.

```dart
final widgets = await HTMLToPdf().convert(
  'Success! 🚀 ✅ Done.',
  fontFallback: [emojiFont, mainFont],
);

```

--------------------------------

### Customizing HTML Tag Styles

Source: https://pub.dev/packages/htmltopdfwidgets

Override default styles for HTML tags like h1 and p using HtmlTagStyle. Useful for applying specific fonts, colors, and spacing.

```dart
final widgets = await HTMLToPdf().convert(
  html,
  tagStyle: HtmlTagStyle(
    h1Style: pw.TextStyle(color: PdfColors.blue900, fontWeight: pw.FontWeight.bold),
    pStyle: pw.TextStyle(lineSpacing: 2.0),
  ),
);

```
Tokens:
Raw