Flutter HTML转PDF插件html_to_pdf_plus的使用
Flutter HTML转PDF插件html_to_pdf_plus的使用
html_to_pdf_plus简介
html_to_pdf_plus 是一个Flutter插件，用于从HTML生成PDF文件。它支持大多数常见的HTML标记，并且可以轻松地将HTML内容转换为PDF格式。
使用方法
从HTML内容生成PDF
下面是一个简单的示例，展示了如何使用 html_to_pdf_plus 插件从HTML字符串生成PDF文件：
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:html_to_pdf_plus/html_to_pdf_plus.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 html_to_pdf_plus plugin</h2>
<table style="width:100%">
<caption>Sample HTML Table</caption>
<tr>
<th>Portfolio</th>
<th>Link</th>
</tr>
<tr>
<td>Website</td>
<td><a href="https://khizarrehman.com/">https://khizarrehman.com/</a></td>
</tr>
<tr>
<td>Fiverr</td>
<td><a href="https://www.fiverr.com/ranakhizar">https://www.fiverr.com/ranakhizar</a></td>
</tr>
</table>
<img src="https://avatars.githubusercontent.com/u/32544554?v=4" alt="web-img">
</body>
</html>
""";
Directory appDocDir = await getApplicationDocumentsDirectory();
final targetPath = appDocDir.path;
final targetFileName = "example-pdf";
final generatedPdfFile = await HtmlToPdf.convertFromHtmlContent(
htmlContent: htmlContent,
configuration: PdfConfiguration(
targetDirectory: targetPath,
targetName: targetFileName,
printSize: PrintSize.A4,
printOrientation: PrintOrientation.Portrait,
linksClickable: true
));
generatedPdfFilePath = generatedPdfFile.path;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("HTML to PDF Example")),
body: Center(
child: ElevatedButton(
child: Text("Open Generated PDF Preview"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PDFViewer(
appBarTitle: "Generated PDF Document",
path: generatedPdfFilePath)),
);
},
),
),
));
}
}
其他用法
除了直接从HTML字符串生成PDF外，你还可以通过传递HTML文件或文件路径来生成PDF。
从HTML文件生成PDF
var file = File("/sample_path/example.html");
var generatedPdfFilee = await HtmlToPdf.convertFromHtmlFile(
htmlFile: file,
configuration: PdfConfiguration(
targetDirectory: targetPath,
targetName: targetFileName,
printSize: PrintSize.A4,
printOrientation: PrintOrientation.Portrait,
linksClickable: true
)
);
从HTML文件路径生成PDF
var filePath = "/sample_path/example.html";
var generatedPdfFilee = await HtmlToPdf.convertFromHtmlFilePath(
htmlFilePath: filePath,
configuration: PdfConfiguration(
targetDirectory: targetPath,
targetName: targetFileName,
printSize: PrintSize.A4,
printOrientation: PrintOrientation.Portrait,
linksClickable: true
)
);
添加图片
如果你想要在HTML中添加本地图片，可以通过提供图片的路径来实现：
<img src="file:///storage/example/your_sample_image.png" alt="web-img">
或者使用 File 对象：
<img src="${imageFile.path}" alt="web-img">
注意：大量图片可能会显著增加最终PDF文件的大小，建议使用 flutter_image_compress 插件来压缩图片。
以上就是 html_to_pdf_plus 插件的基本使用方法，希望对你有所帮助！
更多关于Flutter HTML转PDF插件html_to_pdf_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter HTML转PDF插件html_to_pdf_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何使用Flutter插件html_to_pdf_plus将HTML内容转换为PDF的示例代码。这个插件允许你将HTML字符串或者从网络加载的HTML内容转换为PDF文件并保存到设备上。
首先，你需要在你的pubspec.yaml文件中添加html_to_pdf_plus依赖：
dependencies:
flutter:
sdk: flutter
html_to_pdf_plus: ^5.0.0 # 请检查最新版本号
然后运行flutter pub get来安装依赖。
接下来是一个完整的Flutter应用示例，展示如何使用html_to_pdf_plus：
import 'package:flutter/material.dart';
import 'package:html_to_pdf_plus/html_to_pdf_plus.dart';
import 'dart:io';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter HTML to PDF Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _result = "";
Future<void> _generatePdf() async {
// 定义HTML内容
String htmlData = """
<html>
<head>
<title>Sample HTML</title>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #333333; }
</style>
</head>
<body>
<h1>Hello, this is a sample HTML to PDF conversion!</h1>
<p>This is a paragraph of text to demonstrate the conversion.</p>
</body>
</html>
""";
try {
// 创建PDF文档
final pdf = await HtmlToPdfPlus().convertFromHtml(
htmlData: htmlData,
// 可选参数，如页面格式、边距等
pageFormat: PdfPageFormat.a4,
margin: EdgeInsets.all(20),
);
// 保存PDF到设备存储
final output = File('sample.pdf');
await output.writeAsBytes(pdf.bytes);
setState(() {
_result = "PDF generated successfully and saved to ${output.path}";
});
} catch (e) {
setState(() {
_result = "Failed to generate PDF: ${e.message}";
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter HTML to PDF Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
_result,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _generatePdf,
child: Text('Generate PDF'),
),
],
),
),
);
}
}
这个示例展示了如何：
- 在
pubspec.yaml中添加html_to_pdf_plus依赖。 - 创建一个简单的Flutter应用，其中包含一个按钮，点击按钮会生成一个包含HTML内容的PDF文件。
- 使用
HtmlToPdfPlus().convertFromHtml方法将HTML字符串转换为PDF。 - 将生成的PDF保存到设备的存储中，并显示成功或失败的消息。
请注意，实际使用时你可能需要处理更多的错误情况和权限请求（例如，请求存储权限）。此外，确保你的应用具有适当的权限来写入设备存储。
