Flutter HTML转PDF插件angur_html_to_pdf的使用

Flutter HTML转PDF插件angur_html_to_pdf的使用

插件简介

angur_html_to_pdf 是一个用于从HTML生成PDF文件的Flutter插件。

使用方法

基本用法

以下代码展示了如何从HTML内容生成PDF文件。它应该能够处理大多数常见的HTML标记。你无需在 targetFileName 中添加 .pdf 扩展名，因为插件会自动添加扩展名。

import 'dart:io';
import 'package:flutter_html_to_pdf/flutter_html_to_pdf.dart';

void main() async {
  // 定义HTML内容
  var htmlContent =
  """
  <!DOCTYPE html>
  <html>
  <head>
    <style>
    @page {
      size: A4 portrait;
      margin: 20px;
    }
    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";

  // 调用插件生成PDF文件
  var generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlContent(
      htmlContent, targetPath, targetFileName);

  print("PDF文件已生成: ${generatedPdfFile.path}");
}

其他用法

使用 File 对象作为参数

你可以直接传递包含HTML内容的 File 对象。

import 'dart:io';
import 'package:flutter_html_to_pdf/flutter_html_to_pdf.dart';

void main() async {
  // 定义HTML文件路径
  var file = File("/sample_path/example.html");

  // 定义目标路径和文件名
  var targetPath = "/your/sample/path";
  var targetFileName = "example_pdf_file";

  // 调用插件生成PDF文件
  var generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlFile(
      file, targetPath, targetFileName);

  print("PDF文件已生成: ${generatedPdfFile.path}");
}

使用文件路径作为参数

你也可以直接传递HTML文件的路径。

import 'dart:io';
import 'package:flutter_html_to_pdf/flutter_html_to_pdf.dart';

void main() async {
  // 定义HTML文件路径
  var filePath = "/sample_path/example.html";

  // 定义目标路径和文件名
  var targetPath = "/your/sample/path";
  var targetFileName = "example_pdf_file";

  // 调用插件生成PDF文件
  var generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlFilePath(
      filePath, targetPath, targetFileName);

  print("PDF文件已生成: ${generatedPdfFile.path}");
}

图片支持

如果你想在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插件angur_html_to_pdf的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


angur_html_to_pdf 是一个用于将 HTML 转换为 PDF 的 Flutter 插件。它允许你将 HTML 内容渲染为 PDF 文件，并保存到设备上。以下是如何使用 angur_html_to_pdf 插件的基本步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  angur_html_to_pdf: ^1.0.0  # 请检查最新版本

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

2. 导入插件

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

import 'package:angur_html_to_pdf/angur_html_to_pdf.dart';

3. 使用插件生成 PDF

以下是一个简单的示例，展示如何将 HTML 内容转换为 PDF 并保存到设备上：

import 'package:flutter/material.dart';
import 'package:angur_html_to_pdf/angur_html_to_pdf.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('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 simple HTML content converted to PDF.</p>
    ''';

    // 生成 PDF
    final pdfFile = await AngurHtmlToPdf.convertFromHtmlContent(
      htmlContent,
    );

    // 获取保存路径
    final directory = await getApplicationDocumentsDirectory();
    final path = '${directory.path}/example.pdf';

    // 保存 PDF 文件
    final file = File(path);
    await file.writeAsBytes(pdfFile);

    // 打印保存路径
    print('PDF saved to: $path');
  }
}
回到顶部