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

Question

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

基本上，我想实现当用户单击购物车中的下载按钮时，购物车中的所有产品都应与其图像一起添加，到目前为止，图像尚未添加，但其他详细信息已添加到 pdf 中。

我正在使用syncfusion pdf创建一个pdf，我的pdf已成功创建。

我也想用它添加图像。

我的逻辑是下载图像然后将其添加到 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

添加此包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),
  ); 
}));