Flutter HTML转PDF插件flutter_html_to_pdf的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter HTML转PDF插件flutter_html_to_pdf的使用

简介

flutter_html_to_pdf 是一个用于从HTML生成PDF文件的Flutter插件。它允许开发者将复杂的HTML内容转换为PDF文档，适用于需要生成报告、发票等场景。

使用方法

从HTML字符串生成PDF

以下代码展示了如何通过一段HTML字符串来创建PDF文件：

import 'package:flutter/material.dart';
import 'package:flutter_html_to_pdf/flutter_html_to_pdf.dart';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String generatedPdfFilePath;

  @override
  void initState() {
    super.initState();
    generateExampleDocument();
  }

  Future<void> generateExampleDocument() async {
    final htmlContent = """
    <!DOCTYPE html>
    <html>
      <head>
        <style>
        table, th, td {
          border: 1px solid black;
          border-collapse: collapse;
        }
        th, td, p {
          padding: 5px;
          text-align: left;
        }
        </style>
      </head>
      <body>
        <h2>PDF Generated with flutter_html_to_pdf plugin</h2>
        
        <table style="width:100%">
          <caption>Sample HTML Table</caption>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
          <tr>
            <td>January</td>
            <td>100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>50</td>
          </tr>
        </table>
        
        <p>Image loaded from web</p>
        <img src="https://i.imgur.com/wxaJsXF.png" alt="web-img">
      </body>
    </html>
    """;

    Directory appDocDir = await getApplicationDocumentsDirectory();
    final targetPath = appDocDir.path;
    final targetFileName = "example-pdf";

    final generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlContent(htmlContent, targetPath, targetFileName);
    generatedPdfFilePath = generatedPdfFile.path;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          child: Text("Open Generated PDF Preview"),
          onPressed: () {
            // 注意：此处假设您已安装了用于预览PDF的插件（如flutter_full_pdf_viewer）
            // 并正确设置了路径。
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PDFViewerScaffold(appBar: AppBar(title: Text("Generated PDF Document")), path: generatedPdfFilePath)),
            );
          },
        ),
      ),
    ));
  }
}

其他用法

除了直接使用HTML字符串外，你还可以通过传递包含HTML内容的File对象或文件路径来生成PDF：

// 使用File对象
var file = File("/sample_path/example.html");
var generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlFile(file, targetPath, targetFileName);

// 或者使用文件路径
var filePath = "/sample_path/example.html";
var generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlFilePath(filePath, targetPath, targetFileName);

图片处理

如果您想要添加本地图片到HTML中，请确保使用正确的src属性值指向设备上的图片路径：

<img src="file:///storage/example/your_sample_image.png" alt="local-img">

或者使用File对象的方式：

<img src="${imageFile.path}" alt="local-img">

当文档中有大量图片时，可能会导致最终生成的PDF文件体积较大。建议考虑使用flutter_image_compress插件对图片进行压缩优化。

以上就是关于flutter_html_to_pdf的基本介绍和使用示例，希望能帮助到大家！如果有任何问题欢迎留言讨论。


更多关于Flutter HTML转PDF插件flutter_html_to_pdf的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter HTML转PDF插件flutter_html_to_pdf的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_html_to_pdf插件将HTML内容转换为PDF的示例代码。这个插件允许你将HTML字符串或来自网络资源的HTML内容渲染为PDF文件。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加flutter_html_to_pdf依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_html_to_pdf: ^4.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

2. 导入包

在你的Dart文件中导入flutter_html_to_pdf包：

import 'package:flutter_html_to_pdf/flutter_html_to_pdf.dart';

3. 使用插件

以下是一个简单的例子，展示了如何将HTML字符串转换为PDF并保存到设备存储中：

import 'package:flutter/material.dart';
import 'package:flutter_html_to_pdf/flutter_html_to_pdf.dart';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter HTML to PDF Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _generatePdf,
            child: Text('Generate PDF'),
          ),
        ),
      ),
    );
  }

  Future<void> _generatePdf() async {
    // 定义HTML内容
    String htmlContent = """
      <h1>Hello, World!</h1>
      <p>This is a sample HTML content converted to PDF.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    """;

    // 获取应用文档目录路径
    Directory appDocDir = await getApplicationDocumentsDirectory();
    String appDocPath = appDocDir.path;
    String filePath = "${appDocPath}/sample.pdf";

    // 调用插件生成PDF
    try {
      await FlutterHtmlToPdf.saveHtmlAsPdf(
        htmlContent: htmlContent,
        fileName: filePath,
      );
      print("PDF generated successfully at $filePath");
    } catch (e) {
      print("Error generating PDF: $e");
    }
  }
}

4. 运行应用

将上述代码添加到你的Flutter项目中，然后运行应用。点击按钮后，HTML内容将被转换为PDF并保存到应用的文档目录中。

注意事项

  • 确保你的应用有写权限（特别是iOS设备，你可能需要在Info.plist中添加相关权限）。
  • 插件可能不支持所有HTML和CSS特性，因此请根据你的需求进行测试和调整。
  • 生成的PDF文件路径可以通过设备的文件管理器进行访问（在Android上可能需要使用文件管理器应用，而在iOS上可以通过iTunes或Finder访问应用的沙盒目录）。

这样，你就可以使用flutter_html_to_pdf插件将HTML内容转换为PDF文件了。希望这个示例对你有帮助！

回到顶部