วิธีการเรนเดอร์ QRImage เป็น. png เพื่อใช้ในเอกสาร pdf
Aug 18 2020
ฉันมีภาพ QR ต่อไปนี้ที่ต้องการแปลงเป็น. png มีโพสต์ที่คล้ายกันใน stackoverflow เมื่อสองสามปีก่อน แต่มันใช้ปุ่มเพื่อคลิกและรับภาพที่ฉันไม่มีในแอพของฉัน นี่คือรหัสของฉันที่ดึง QR ความช่วยเหลือใด ๆ ในการแปลงเป็น. png เพื่อให้ฉันสามารถเพิ่มลงใน pdf ของฉันได้รับการชื่นชม
Widget getQRImage() {
if (this.showQR) {
return QrImage(
data: jsonEncode({
"name": _name,
"email": _email,
"image": imageUrl,
}),
version: QrVersions.auto,
size: 200,
gapless: false,
embeddedImage: new AssetImage('assets/logo.png'),
embeddedImageStyle: QrEmbeddedImageStyle(
size: Size(50, 50),
),
backgroundColor: StateContainer.of(context).curTheme.primary,
errorStateBuilder: (cxt, err) {
return Container(
child: Center(
child: Text(
"Uh oh! Something went wrong...",
textAlign: TextAlign.center,
),
),
);
},
);
} else {
return Container();
}
}
แก้ไข:
นี่คือลักษณะของวิดเจ็ตของฉันตามคำตอบ แต่ฉันไม่สามารถโหลด pdf ได้อีกต่อไป ผิดไหมเพราะวิดเจ็ตของฉันไม่ส่งคืนอะไรเลย?
pw.Widget _showQR(pw.Context context) {
pw.Center(
child: pw.Paragraph(text: "Your QR", style: pw.TextStyle(fontSize: 18)));
pw.Center(child: pw.BarcodeWidget(
data: jsonEncode({
"name": "_name",
"email": "_email",
// "image": "imageUrl",
}),
width: 150,
height: 150,
barcode: pw.Barcode.qrCode(),
),);
pw.Padding(padding: const pw.EdgeInsets.all(10));
}
คำตอบ
TipuSultan Aug 18 2020 at 17:22
ในการวาดรหัส qr บน pdf คุณสามารถใช้ pw.BarcodeWidget นี่คือตัวอย่างรหัส:
Future<Uint8List> generateDocument() async {
final pw.Document doc = pw.Document();
doc.addPage(pw.MultiPage(
pageFormat: PdfPageFormat.a4,
crossAxisAlignment: pw.CrossAxisAlignment.start,
header: (pw.Context context) {
if (context.pageNumber == 1) {
return null;
}
return pw.Container(
alignment: pw.Alignment.centerRight,
margin: const pw.EdgeInsets.only(bottom: 3.0 * PdfPageFormat.mm),
padding: const pw.EdgeInsets.only(bottom: 3.0 * PdfPageFormat.mm),
decoration: const pw.BoxDecoration(
border: pw.BoxBorder(
bottom: true, width: 0.5, color: PdfColors.grey)),
child: pw.Text('Portable Document Format',
style: pw.Theme.of(context)
.defaultTextStyle
.copyWith(color: PdfColors.grey)));
},
build: (pw.Context context) => <pw.Widget>[
pw.Center(child: pw.Paragraph(text: "Your QR", style: pw.TextStyle(fontSize: 18)),),
pw.Center(child: pw.BarcodeWidget(
data: jsonEncode({
"name": "_name",
"email": "_email",
"image": "imageUrl",
}),
width: 150,
height: 150,
barcode: pw.Barcode.qrCode(),
),),
pw.Padding(padding: const pw.EdgeInsets.all(10)),
]));
return doc.save();
}
Future<File> getPdf() async {
Uint8List uint8list = await generateDocument();
Directory output = await getTemporaryDirectory();
File file = File(output.path + "/example.pdf");
await file.writeAsBytes(uint8list);
return file;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: FutureBuilder<File>(
future: getPdf(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Center(
child: PDFView(
filePath: snapshot.data.path,
autoSpacing: false,
pageFling: false,
),
);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
);
}
เอาท์พุท:

ในการสร้าง pdf ฉันใช้แพ็คเกจpdf ในการแสดง pdf ที่ใช้flutter_pdfviewและเพื่อรับแพ็คเกจtemp directory path_providerจะถูกใช้
และอย่าลืมนำเข้า 'package:pdf/widgets.dart' as pw;