Flutter HTML转PDF插件flutter_html_to_pdf_updated的使用

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

Flutter HTML转PDF插件flutter_html_to_pdf_updated的使用

使用

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内容生成PDF文件。它应该可以处理大多数常见的HTML标记。你不需要在targetFileName中添加.pdf扩展名，因为该插件只会生成PDF文件，并且会自动添加扩展名。

其他用法

你还可以传递一个包含HTML内容的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="web-img">

或者，如果你想使用图片的File对象：

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

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

1 回复

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


当然，以下是一个关于如何使用flutter_html_to_pdf_updated插件将HTML内容转换为PDF的示例代码。这个插件允许你将Flutter应用中的HTML内容渲染并保存为PDF文件。

首先，确保你已经在pubspec.yaml文件中添加了flutter_html_to_pdf_updated依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_html_to_pdf_updated: ^x.y.z  # 请将x.y.z替换为最新版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Flutter应用中，你可以使用以下代码将HTML内容转换为PDF：

import 'package:flutter/material.dart';
import 'package:flutter_html_to_pdf_updated/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: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Future<void> _generatePdf() async {
    // 定义HTML内容
    String htmlData = """
      <h1>Hello, World!</h1>
      <p>This is a sample HTML content converted to PDF.</p>
    """;

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

    // 将HTML内容转换为PDF并保存
    await FlutterHtmlToPdf.convertFromHtmlData(
      data: htmlData,
      outputPath: pdfPath,
    );

    // 打开生成的PDF文件（仅在Android和iOS上有效）
    // 注意：此部分代码可能需要在平台上做额外处理，例如使用`url_launcher`来打开文件
    // 在这里仅作为示例，可能需要根据具体平台调整
    // if (Platform.isAndroid) {
    //   await OpenFile.open(pdfPath);
    // } else if (Platform.isIOS) {
    //   // iOS打开文件的逻辑可能需要使用其他库或方法
    // }

    // 输出成功信息
    print('PDF generated at $pdfPath');
  }

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

在上面的代码中，我们定义了一个简单的Flutter应用，其中包含一个按钮，点击按钮时会调用_generatePdf函数。该函数执行以下操作：

  1. 定义要转换为PDF的HTML内容。
  2. 获取应用文档目录的路径，并确定PDF文件的保存路径。
  3. 使用FlutterHtmlToPdf.convertFromHtmlData方法将HTML内容转换为PDF并保存到指定路径。
  4. 输出PDF文件的路径（在实际应用中，你可能需要在这里添加代码以通知用户或打开生成的PDF文件）。

请注意，OpenFile.open(pdfPath)这部分代码仅作为示例，并未包含实际的依赖实现。在Android和iOS上打开文件可能需要使用额外的库和方法。例如，在Android上，你可以使用url_launcher库与文件选择器结合来打开文件。在iOS上，可能需要使用share_extend或其他方法来实现。

希望这个示例能帮助你理解如何使用flutter_html_to_pdf_updated插件将HTML内容转换为PDF。如果你有任何其他问题，欢迎继续提问！

回到顶部