flutter

Question

大家好，我正在尝试添加网络图像或 url 图像，同时正在创建我的 pdf。

基本上，当用户点击我购物车中的下载按钮时，我想实现的是，我购物车中的所有产品都应该连同它的图片一起添加，到目前为止，图片还没有被添加，但其他细节被添加到pdf.

我正在使用 syncfusion pdf 创建 pdf n 我的 pdf 创建成功。

我也想用它添加图片。

我的逻辑是下载图片 n 然后将其添加到 pdf 中，但不知何故它崩溃了。

我使用了以下软件包

https://pub.dev/packages/syncfusion_flutter_pdf

https://pub.dev/packages/image_downloader

下面是我试过的代码

List<File> _mulitpleFiles = [];

  Future<void> generateInvoice() async {
    //Create a PDF document.
    final PdfDocument document = PdfDocument();
    //Add page to the PDF
    final PdfPage page = document.pages.add();
    //Get page client size
    final Size pageSize = page.getClientSize();
    //Draw rectangle
    page.graphics.drawRectangle(
        bounds: Rect.fromLTWH(0, 0, pageSize.width, pageSize.height),
        pen: PdfPen(PdfColor(142, 170, 219, 255)));
    //Generate PDF grid.
    final PdfGrid grid = getGrid();
    //Draw the header section by creating text element
    final PdfLayoutResult result = drawHeader(page, pageSize, grid);
    //Draw grid
    drawGrid(page, grid, result);
    //Add invoice footer
    drawFooter(page, pageSize);
    //Save the PDF document
    final List<int> bytes = document.save();
    //Dispose the document.
    document.dispose();
    //Get external storage directory
    Directory directory = (await getExternalStorageDirectory());
    //Get directory path
    String path = directory.path;
    print(path);
    //Create an empty file to write PDF data
    File file = File('$path/Output.pdf');
    //Write PDF data
    await file.writeAsBytes(bytes, flush: true);
    //Open the PDF document in mobile
    OpenFile.open('$path/Output.pdf');
  }

  //Draws the invoice header
  PdfLayoutResult drawHeader(PdfPage page, Size pageSize, PdfGrid grid) {
    //Draw rectangle
    page.graphics.drawRectangle(
        brush: PdfSolidBrush(PdfColor(91, 126, 215, 255)),
        bounds: Rect.fromLTWH(0, 0, pageSize.width - 115, 90));
    //Draw string
    page.graphics.drawString(
        'INVOICE', PdfStandardFont(PdfFontFamily.helvetica, 30),
        brush: PdfBrushes.white,
        bounds: Rect.fromLTWH(25, 0, pageSize.width - 115, 90),
        format: PdfStringFormat(lineAlignment: PdfVerticalAlignment.middle));

    page.graphics.drawRectangle(
        bounds: Rect.fromLTWH(400, 0, pageSize.width - 400, 90),
        brush: PdfSolidBrush(PdfColor(65, 104, 205)));

    page.graphics.drawString('',
        PdfStandardFont(PdfFontFamily.helvetica, 18),
        bounds: Rect.fromLTWH(400, 0, pageSize.width - 400, 100),
        brush: PdfBrushes.white,
        format: PdfStringFormat(
            alignment: PdfTextAlignment.center,
            lineAlignment: PdfVerticalAlignment.middle));

    final PdfFont contentFont = PdfStandardFont(PdfFontFamily.helvetica, 9);
    //Draw string
    page.graphics.drawString('', contentFont,
        brush: PdfBrushes.white,
        bounds: Rect.fromLTWH(400, 0, pageSize.width - 400, 33),
        format: PdfStringFormat(
            alignment: PdfTextAlignment.center,
            lineAlignment: PdfVerticalAlignment.bottom));
    //Create data foramt and convert it to text.
    final DateFormat format = DateFormat.yMMMMd('en_US');
    final String invoiceNumber = '';// + format.format(DateTime.now());
    final Size contentSize = contentFont.measureString(invoiceNumber);
    // ignore: leading_newlines_in_multiline_strings
    const String address = '''''';
    // final DateFormat format = DateFormat.yMMMMd('en_US');
    // final String invoiceNumber = 'Invoice Number: 2058557939\r\n\r\nDate: ' +
    //     format.format(DateTime.now());
    // final Size contentSize = contentFont.measureString(invoiceNumber);
    // // ignore: leading_newlines_in_multiline_strings
    // const String address = '''Bill To: \r\n\r\nAbraham Swearegin,
    //     \r\n\r\nUnited States, California, San Mateo,
    //     \r\n\r\n9920 BridgePointe Parkway, \r\n\r\n9365550136''';

    PdfTextElement(text: invoiceNumber, font: contentFont).draw(
        page: page,
        bounds: Rect.fromLTWH(pageSize.width - (contentSize.width + 30), 120,
            contentSize.width + 30, pageSize.height - 120));

    return PdfTextElement(text: address, font: contentFont).draw(
        page: page,
        bounds: Rect.fromLTWH(30, 120,
            pageSize.width - (contentSize.width + 30), pageSize.height - 120));
  }

  //Draws the grid
  void drawGrid(PdfPage page, PdfGrid grid, PdfLayoutResult result) {
    Rect totalPriceCellBounds;
    Rect quantityCellBounds;
    //Invoke the beginCellLayout event.
    grid.beginCellLayout = (Object sender, PdfGridBeginCellLayoutArgs args) {
      final PdfGrid grid = sender as PdfGrid;
      if (args.cellIndex == grid.columns.count - 1) {
        totalPriceCellBounds = args.bounds;
      } else if (args.cellIndex == grid.columns.count - 2) {
        quantityCellBounds = args.bounds;
      }
    };
    //Draw the PDF grid and get the result.
    result = grid.draw(
        page: page, bounds: Rect.fromLTWH(0, result.bounds.bottom + 40, 0, 0));

    //Draw grand total.
    page.graphics.drawString('',
        PdfStandardFont(PdfFontFamily.helvetica, 9, style: PdfFontStyle.bold),
        bounds: Rect.fromLTWH(
            quantityCellBounds.left,
            result.bounds.bottom + 10,
            quantityCellBounds.width,
            quantityCellBounds.height));
    page.graphics.drawString('',
        PdfStandardFont(PdfFontFamily.helvetica, 9, style: PdfFontStyle.bold),
        bounds: Rect.fromLTWH(
            totalPriceCellBounds.left,
            result.bounds.bottom + 10,
            totalPriceCellBounds.width,
            totalPriceCellBounds.height));
  }

  //Draw the invoice footer data.
  void drawFooter(PdfPage page, Size pageSize) {
    final PdfPen linePen =
    PdfPen(PdfColor(142, 170, 219, 255), dashStyle: PdfDashStyle.custom);
    linePen.dashPattern = <double>[3, 3];
    //Draw line
    page.graphics.drawLine(linePen, Offset(0, pageSize.height - 100),
        Offset(pageSize.width, pageSize.height - 100));

    const String footerContent =
    // ignore: leading_newlines_in_multiline_strings
    '''\r\n\r\nAny Questions? shreennansharda@gmail.com''';

    //Added 30 as a margin for the layout
    page.graphics.drawString(
        footerContent, PdfStandardFont(PdfFontFamily.helvetica, 9),
        format: PdfStringFormat(alignment: PdfTextAlignment.right),
        bounds: Rect.fromLTWH(pageSize.width - 30, pageSize.height - 70, 0, 0));
  }

  //Create PDF grid and return
  PdfGrid getGrid() {
    //Create a PDF grid
    final PdfGrid grid = PdfGrid();
    //Secify the columns count to the grid.
    grid.columns.add(count: 5);
    //Create the header row of the grid.
    final PdfGridRow headerRow = grid.headers.add(1)[0];
    //Set style
    headerRow.style.backgroundBrush = PdfSolidBrush(PdfColor(68, 114, 196));
    headerRow.style.textBrush = PdfBrushes.white;
    headerRow.cells[0].value = 'Product Image';
    headerRow.cells[1].value = 'Product Id';
    headerRow.cells[1].stringFormat.alignment = PdfTextAlignment.center;
    headerRow.cells[2].value = 'Product Name';
    headerRow.cells[3].value = 'Metal';
    headerRow.cells[4].value = 'Stone';
    headerRow.cells[5].value = 'Quantity';
    //Add rows
    for(int i = 0; i < _totalItems; i++){
      addProducts(array[i], nameArray[i], metalArray[i], _mulitpleFiles[i], stoneArray[i], 1, grid);
    }
    //Apply the table built-in style
    grid.applyBuiltInStyle(PdfGridBuiltInStyle.listTable4Accent5);
    //Set gird columns width
    grid.columns[1].width = 200;
    for (int i = 0; i < headerRow.cells.count; i++) {
      headerRow.cells[i].style.cellPadding =
          PdfPaddings(bottom: 5, left: 5, right: 5, top: 5);
    }
    for (int i = 0; i < grid.rows.count; i++) {
      final PdfGridRow row = grid.rows[i];
      for (int j = 0; j < row.cells.count; j++) {
        final PdfGridCell cell = row.cells[j];
        if (j == 0) {
          cell.stringFormat.alignment = PdfTextAlignment.center;
        }
        cell.style.cellPadding =
            PdfPaddings(bottom: 5, left: 5, right: 5, top: 5);
      }
    }
    return grid;
  }

  //Create and row for the grid.
  void addProducts(String productId, String productName, String metal,File productImage,
      String stone, int quantity, PdfGrid grid) {
    final PdfGridRow row = grid.rows.add();
    row.cells[0].value = productImage;
    row.cells[1].value = productId;
    row.cells[2].value = productName;
    row.cells[3].value = metal;
    row.cells[4].value = stone;
    row.cells[5].value = quantity.toString();
  }

  //Get the total amount.
  double getTotalAmount(PdfGrid grid) {
    double total = 0;
    for (int i = 0; i < grid.rows.count; i++) {
      final String value =
      grid.rows[i].cells[grid.columns.count - 1].value as String;
      total += double.parse(value);
    }
    return total;
  }

下面是用户点击下载按钮时的点击按钮功能

onTap: () async {
                      // var list = photoArray;
                      var list = [
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/bigsize.jpg",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter.jpg",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/sample.HEIC",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_transparent.png",
                        "https://raw.githubusercontent.com/wiki/ko2ic/flutter_google_ad_manager/images/sample.gif",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_no.png",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter.png",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_real_png.jpg",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/bigsize.jpg",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter.jpg",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_transparent.png",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_no.png",
                        "https://raw.githubusercontent.com/wiki/ko2ic/flutter_google_ad_manager/images/sample.gif",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter.png",
                        "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_real_png.jpg",
                      ];

                      List<File> files = [];

                      for (var url in list) {
                        try {
                          final imageId =
                              await ImageDownloader.downloadImage(url);
                          final path = await ImageDownloader.findPath(imageId);
                          print(path);
                          files.add(File(path));
                        } catch (error) {
                          print(error);
                        }
                      }
                      setState(() {
                        _mulitpleFiles.addAll(files);
                      });
                      print('invoice');
                      //Navigator.push(context, MaterialPageRoute(builder: (context) => FullScreen(total: _totalItems,nameArray: nameArray,skuArray: skuArray,stoneArray: stoneArray,metalArray: metalArray,array: array,)));
                      generateInvoice();
                    },

Answer 1

我们检查了提供的代码示例并确定“await ImageDownloader.downloadImage(url)”returns 为空。因此，PDF 网格单元中没有保留图像。我们创建了一个示例来从 webspace/website 读取图像数据并使用检索到的图像数据绘制图像。请在您身边尝试以下代码示例和示例，让我们知道您的问题是否已解决。

在 pubspec.yaml 文件的依赖项部分添加 http 包

dependencies:
  http: ^0.13.3

在您的 dart 文件中导入以下包。

//Read an image data from website/webspace
import 'package:http/http.dart' show get;

获取图像数据

//Read an image data from website/webspace
var url = "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg";
var response = await get(Uri.parse(url));
var data = response.bodyBytes;

将图像绘制到 PDF 文档中

//Load image data into PDF bitmap object
PdfBitmap image = PdfBitmap(data);
//Draw image in page graphics
document.pages
    .add()
    .graphics
    .drawImage(image, const Rect.fromLTWH(0, 0, 500, 200));

将图像绘制到 PDF 文档中

//Create a new page to draw PDF grid
final PdfPage girdPage = document.pages.add();
//Draw image in PDF grid cell
//Create a PDF grid
final PdfGrid grid = PdfGrid();
//Specify the columns count to the grid.
grid.columns.add(count: 2);
//Create the header row of the grid.
final PdfGridRow headerRow = grid.headers.add(1)[0];
headerRow.cells[0].value = 'Image 1';
headerRow.cells[1].value = 'Image 2';

//Add a new row
final PdfGridRow row = grid.rows.add();

//Get image bytes and set into PDF grid cell as PDF bitmap object
var imageResponse1 = await get(Uri.parse(
    "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter.jpg"));
row.cells[0].value = PdfBitmap(imageResponse1.bodyBytes.toList());

//Get image bytes and set into PDF grid cell as PDF bitmap object
var imageResponse2 = await get(Uri.parse(
    "https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_transparent.png"));
row.cells[1].value = PdfBitmap(imageResponse2.bodyBytes.toList());

//Apply the table built-in style
grid.applyBuiltInStyle(PdfGridBuiltInStyle.listTable4Accent5);
//Draw grid in a new page created
grid.draw(
    page: girdPage,
    bounds: Rect.fromLTWH(0, 0, girdPage.getClientSize().width,
        girdPage.getClientSize().height));

示例 link：https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdf_sample-948491757

我们还支持在 PDF 文档中绘制 JPEG 和 PNG 图像。在加载到 PdfBitmap 对象之前，请确保图像数据是 JPEG 或 PNG 类型。请从 https://help.syncfusion.com/flutter/pdf/working-with-images

中找到更多详细信息

并且还在提供的示例代码中确定了与索引相关的更改。请将列数更新为 6，以便在 PDF 网格中添加 6 列。请查看以下代码了解更多详情，

//Secify the columns count to the grid.
grid.columns.add(count: 6);

Answer 2

添加这个包https://pub.dev/packages/printing

printing: ^5.7.2

示例：

final netImage = await networkImage('https://www.nfet.net/nfet.jpg');
pdf.addPage(pw.Page(build: (pw.Context context) {
  return pw.Center(
    child: pw.Image(netImage),
  ); 
}));

flutter - 在 flutter 中创建时在 pdf 中添加网络图像

flutter - add network images in a pdf while creating it in flutter

pdf

syncfusion

dart