flutter_native_html_to_pdf 1.1.1 copy "flutter_native_html_to_pdf: ^1.1.1" to clipboard
flutter_native_html_to_pdf: ^1.1.1 copied to clipboard

Published 9 days ago
SDKFlutter
PlatformAndroidiOSLinuxWindows
→

Metadata

This parckage is using to convert html string to pdf file

More...

Flutter Native HTML to PDF #

This is a Flutter plugin that converts HTML content into a PDF file or PDF bytes. The generated PDF can be saved as a file or used directly as Uint8List for better performance.

Features #

  • HTML to PDF File Conversion: Convert HTML content into a PDF file and save it to a specified directory
  • HTML to PDF Bytes Conversion: Convert HTML content directly to Uint8List PDF data without saving to a file (better performance)
  • Customizable Page Sizes: Support for A4, Letter, Legal, A3, A5, Tabloid, and custom page sizes
  • Cross-platform Support: Works on Android, iOS, Windows, and Linux

Usage #

Convert HTML to PDF File #

import 'package:flutter_native_html_to_pdf/flutter_native_html_to_pdf.dart';
import 'package:path_provider/path_provider.dart';

final plugin = FlutterNativeHtmlToPdf();

const htmlContent = """
<!DOCTYPE html>
<html>
<head><title>Sample PDF</title></head>
<body>
    <h1>Hello World!</h1>
    <p>This is a sample PDF.</p>
</body>
</html>
""";

Directory appDocDir = await getApplicationDocumentsDirectory();
final pdfFile = await plugin.convertHtmlToPdf(
  html: htmlContent,
  targetDirectory: appDocDir.path,
  targetName: "my_document",
);

print('PDF saved at: ${pdfFile?.path}');

Convert HTML to PDF Bytes #

For better performance when you don't need to save the PDF as a file:

import 'package:flutter_native_html_to_pdf/flutter_native_html_to_pdf.dart';

final plugin = FlutterNativeHtmlToPdf();

const htmlContent = """
<!DOCTYPE html>
<html>
<head><title>Sample PDF</title></head>
<body>
    <h1>Hello World!</h1>
    <p>This PDF is generated as bytes.</p>
</body>
</html>
""";

final pdfBytes = await plugin.convertHtmlToPdfBytes(
  html: htmlContent,
);

print('PDF size: ${pdfBytes?.length} bytes');

// Use the bytes directly (e.g., upload to server, share, etc.)
// Or save to file if needed:
// await File('path/to/file.pdf').writeAsBytes(pdfBytes!);

Custom Page Sizes #

You can specify different page sizes for your PDFs. The plugin supports common page sizes and custom dimensions:

import 'package:flutter_native_html_to_pdf/flutter_native_html_to_pdf.dart';
import 'package:flutter_native_html_to_pdf/pdf_page_size.dart';
import 'package:path_provider/path_provider.dart';

final plugin = FlutterNativeHtmlToPdf();

// Use a predefined page size
Directory appDocDir = await getApplicationDocumentsDirectory();
final pdfFile = await plugin.convertHtmlToPdf(
  html: htmlContent,
  targetDirectory: appDocDir.path,
  targetName: "my_document",
  pageSize: PdfPageSize.letter, // US Letter size
);

// Or create a custom page size (dimensions in points, 72 points = 1 inch)
final customPageSize = PdfPageSize.custom(
  width: 500,
  height: 700,
  name: 'My Custom Size',
);

final pdfBytes = await plugin.convertHtmlToPdfBytes(
  html: htmlContent,
  pageSize: customPageSize,
);

Available predefined page sizes:

  • PdfPageSize.a4 - A4 (210mm x 297mm) - Default
  • PdfPageSize.letter - US Letter (8.5" x 11")
  • PdfPageSize.legal - US Legal (8.5" x 14")
  • PdfPageSize.a3 - A3 (297mm x 420mm)
  • PdfPageSize.a5 - A5 (148mm x 210mm)
  • PdfPageSize.tabloid - US Tabloid (11" x 17")

Note: If no page size is specified, the default is A4.

Benefits of Using Bytes Method #

  • Better Performance: Skip file I/O operations when you don't need a physical file
  • Memory Efficiency: Directly use PDF data in memory
  • Flexibility: Easy to upload to servers, share via network, or save conditionally

Dependencies #

  • flutter_native_html_to_pdf
  • path_provider (for file-based conversion)

Platform Support #

  • ✅ Android
  • ✅ iOS
  • ✅ Windows
  • ✅ Linux

Note #

The HTML content can be static or dynamic. You can use any valid HTML, including CSS styles and images.

CSS Styles and Fonts #

This plugin fully supports CSS styling in your HTML content on both Android and iOS:

  • Colors: Background colors, text colors, border colors
  • Fonts: Font families, sizes, weights, and styles (bold, italic, etc.)
  • Layout: Margins, padding, borders, positioning
  • All standard CSS properties

Example HTML with CSS:

const htmlContent = """
<!DOCTYPE html>
<html>
<head>
    <title>Styled PDF</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: #ff0000;
            font-weight: bold;
        }
        p {
            color: #008000;
            font-size: 16px;
        }
        .highlight {
            background-color: #ffff00;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Red Heading</h1>
    <p>Green paragraph text.</p>
    <div class="highlight">
        <p>Yellow highlighted section.</p>
    </div>
</body>
</html>
""";

Using Images in HTML #

This plugin supports loading images in your HTML content, including:

  • External images via HTTP/HTTPS URLs (e.g., https://example.com/image.jpg)
  • Base64 encoded images (e.g., data:image/png;base64,...)
  • Local file images (with proper file:// URLs)

Important Configuration for External Images:

Android

Add the INTERNET permission to your android/app/src/main/AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    
    <application>
        ...
    </application>
</manifest>

iOS

Add App Transport Security settings to your ios/Runner/Info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Example HTML with images:

const htmlContent = """
<!DOCTYPE html>
<html>
<head>
    <title>PDF with Images</title>
</head>
<body>
    <h1>My Document</h1>
    <img src="https://picsum.photos/200/300" alt="Sample image">
    <p>Image from URL</p>
</body>
</html>
""";

Note: The plugin automatically waits for images to load before generating the PDF. For optimal results with external images:

  • Ensure you have a stable internet connection
  • The plugin uses JavaScript to detect when all images have finished loading (either successfully or with errors)
  • Only a minimal 300ms delay is added after image loading for final rendering
  • For faster generation, consider using base64 encoded images or local assets

← Metadata

11
likes
150
points
2.3k
downloads

Publisher

unverified uploader

Weekly Downloads

Metadata

This parckage is using to convert html string to pdf file

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, htmltopdfwidgets, plugin_platform_interface

More

Packages that depend on flutter_native_html_to_pdf

Packages that implement flutter_native_html_to_pdf

Back