Flutter HTML转PDF插件flutter_html_to_pdf2的使用

Flutter HTML转PDF插件flutter_html_to_pdf2的使用

Flutter插件flutter_html_to_pdf用于从HTML生成PDF文件。

使用方法

以下代码展示了如何从HTML内容生成PDF文件。它应该支持大多数常见的HTML标记。您不需要在targetFileName中添加.pdf扩展名，因为该插件仅生成PDF文件，并且会自动添加扩展名。

var 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>
""";

var targetPath = "/your/sample/path";
var targetFileName = "example_pdf_file";

var generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlContent(
    htmlContent, targetPath, targetFileName);

其他用法

您还可以传递包含HTML内容的File对象作为参数：

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

或者直接传递HTML文件的路径：

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="web-img">

或者，如果您想使用File对象：

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

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

1 回复

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


flutter_html_to_pdf2 是一个用于将 HTML 内容转换为 PDF 文件的 Flutter 插件。它基于 dart:html 和 dart:io 库，允许你在 Flutter 应用中生成 PDF 文件。以下是如何使用 flutter_html_to_pdf2 插件的详细步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_html_to_pdf2: ^1.0.0

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

2. 导入插件

在你的 Dart 文件中导入 flutter_html_to_pdf2 插件：

import 'package:flutter_html_to_pdf2/flutter_html_to_pdf2.dart';

3. 生成 PDF

使用 flutter_html_to_pdf2 插件生成 PDF 文件的基本步骤如下：

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

class HtmlToPdfExample extends StatelessWidget {
  Future<void> generatePdf() async {
    // HTML 内容
    final htmlContent = """
    <html>
      <head>
        <style>
          body { font-family: Arial; }
          h1 { color: blue; }
        </style>
      </head>
      <body>
        <h1>Hello, World!</h1>
        <p>This is a sample HTML content converted to PDF.</p>
      </body>
    </html>
    """;

    // 获取应用文档目录
    final directory = await getApplicationDocumentsDirectory();
    final targetPath = "${directory.path}/example.pdf";

    // 生成 PDF 文件
    final generatedPdfFile = await FlutterHtmlToPdf2.convertFromHtmlContent(
      htmlContent,
      targetPath,
    );

    print("PDF generated at: ${generatedPdfFile.path}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTML to PDF Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: generatePdf,
          child: Text('Generate PDF'),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: HtmlToPdfExample(),
));

4. 运行应用

运行你的 Flutter 应用，点击按钮生成 PDF 文件。生成的 PDF 文件将保存在应用的文档目录中，路径类似于 /data/data/<your_app_package>/app_flutter/example.pdf。

5. 查看 PDF 文件

你可以使用文件管理器或通过代码打开生成的 PDF 文件。例如，使用 open_file 插件来打开 PDF 文件：

dependencies:
  open_file: ^3.2.1

然后在代码中使用 open_file 插件打开生成的 PDF 文件：

import 'package:open_file/open_file.dart';

Future<void> openPdf(String filePath) async {
  await OpenFile.open(filePath);
}

在 generatePdf 方法中调用 openPdf：

final generatedPdfFile = await FlutterHtmlToPdf2.convertFromHtmlContent(
  htmlContent,
  targetPath,
);

await openPdf(generatedPdfFile.path);
回到顶部