How to PDF Export Grid Templates correct with Icons or Pics

[Stefan Limpert]

Hi there,

i create a grid with templates similar to your examples (https://blazor.syncfusion.com/demos/datagrid/overview?theme=fluent)

In the GridColumns i am also working with Templates with icons.

I would like to export these columns as same as showed in the grid.

IncludeTemplateColumn in the exportSettings is true, but it does not export the correct html tags like, so the content is just HTML in plain text.

What i need is a correct transforming of the Template Content so the pdf looks like the Gridcolumn on screen.

How can i achieve this?

Regards

Stefan

[Keerthana Ganesan]

Hi Stefan,

Greetings from Syncfusion support.

We analyzed your query, and We suggest you customize the codes inside PdfQueryCellInfoEvent as like the below code to export images in the template column to a pdf file. Kindly refer to the attached code snippet and solution file for your reference.

 

    public void PdfQueryCellInfoEvent(PdfQueryCellInfoEventArgs<Order> args)

    {

        if (args.Column.HeaderText == "Order ID")

        {

            Image img = Image.FromFile(@"wwwroot/Images/Uploads/" + args.Data.OrderID.ToString() + ".png");

            byte[] bytes = (byte[])(new ImageConverter()).ConvertTo(img, typeof(byte[]));

 

            //use the byte to generate a base64String and assign to image to get displayed in Grid

            string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);

 

            byte[] dataString = Convert.FromBase64String(base64String);

            System.IO.MemoryStream imageStream = new System.IO.MemoryStream(dataString);

            args.Cell.Style.BackgroundImage = Syncfusion.PdfExport.PdfImage.FromStream(imageStream);

            args.Cell.ImagePosition = Syncfusion.PdfExport.PdfGridImagePosition.Center;

        }

        ...

   }

 

Kindly get back to us if you have further queries.

Regards,

Keerthana.

Attachment: ServerApp1760890938_(2)_5119b8d7.zip

[Stefan Limpert]

Hi Keerthana,

i appreciate your suggestions. It's a good start but not complete. In your solution image export works in PDF, but not in Excel and Links working in in Excel but not in PDF. Unfortunately i need both in exports, but primary in pdf. I have tried in your example to work with HTML code, but PDF transforms it always to plain text. I also need to show icons  of FontAwesome in the cells. How can i achieve this too?

Regards

Stefan

[Keerthana Ganesan]

Hi Stefan,

Welcome from Syncfusion support.

Query 1: export image or hyperlink column to excel.

We suggest you customize the args.Cell.Value inside ExcelQueryCellInfoEvent handler to achieve this requirement. You can use the below code to export hyperlinks in the Grid Template column to an excel file. Please refer to and use the code below,

 

    public void ExcelQueryCellInfoEvent(ExcelQueryCellInfoEventArgs<Order> args)

    {

        ...

       if (args.Column.HeaderText == "Customer Name")

        {

            args.Cell.Value = "<a rel='nofollow' href=\'https:\\www.google.com'>" + @args.Data.CustomerID + "</a>";

        }

    }

 

And we would like to inform you that, Excel export doesn’t have support for exporting images in corresponding excel cells.

Query 2: export image or hyperlink column to pdf.

We suggest you customize the codes inside PdfQueryCellInfoEvent as like the below code to export images in the template column to a pdf file. Please refer to and use the code below,

 

    public void PdfQueryCellInfoEvent(PdfQueryCellInfoEventArgs<Order> args)

    {

        if (args.Column.HeaderText == "Order ID")

        {

            Image img = Image.FromFile(@"wwwroot/Images/Uploads/" + args.Data.OrderID.ToString() + ".png");

            byte[] bytes = (byte[])(new ImageConverter()).ConvertTo(img, typeof(byte[]));

 

            //use the byte to generate a base64String and assign to image to get displayed in Grid

            string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);

 

            byte[] dataString = Convert.FromBase64String(base64String);

            System.IO.MemoryStream imageStream = new System.IO.MemoryStream(dataString);

            args.Cell.Style.BackgroundImage = Syncfusion.PdfExport.PdfImage.FromStream(imageStream);

            args.Cell.ImagePosition = Syncfusion.PdfExport.PdfGridImagePosition.Center;

        }

        ...

   }

 

We are currently checking the possibility of exporting hyperlinks to pdf from our side. We will update you with further details within two business days. Until then we appreciate your patience.

Regards,

Keerthana.

[Stefan Limpert]

Hello again,

i'm still waiting :-)

Regards

Stefan

[Prathap Senthil]

Hi Stefan,

We apologize for any inconvenience caused by the delay in exporting hyperlinks to PDF.We have created a sample for you based on your requirements. Please refer to the attached code snippet and sample for your reference.

  public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

 

        if(args.Item.Id == "Grid_pdfexport")

        {

            PdfDocument pdfDocument = new PdfDocument();

            PdfPage pdfPage = pdfDocument.Pages.Add();

            PdfGraphics graphics = pdfPage.Graphics;

            //Create a new PdfGrid.

            PdfGrid pdfGrid = new PdfGrid();

            pdfGrid.BeginCellLayout += PdfGrid_BeginCellLayout;

            pdfGrid.Columns.Add(Grid.Columns.Count);

 

            PdfGridRow[] headerRow = pdfGrid.Headers.Add(1);

 

            var GridColHeader = Grid.Columns.Select(x => x.HeaderText).ToList();

            for (var i = 0; i < Grid.Columns.Count; i++)

            {

                headerRow[0].Cells[i].Value = GridColHeader[i];

            }

            // Add Rows to the grid based/using on Grid's DataSource

            for (int i = 0; i < Orders.Count; i++)

            {

               PdfGridRow row = pdfGrid.Rows.Add();

                //assign cells based on grid's columns

                row.Cells[0].Value = Orders[i].OrderID.ToString();

                row.Cells[1].Value = Orders[i].CustomerID;

                row.Cells[2].Value = Orders[i].OrderDate.ToString();

                row.Cells[3].Value = Orders[i].Freight.ToString();

            }

 

            //enable repeating grid column header in each page

            pdfGrid.RepeatHeader = true;

            //Draw the PdfGrid.

 

            pdfGrid.Draw(pdfPage, new PointF(0, 0));

            MemoryStream stream = new MemoryStream();

            pdfDocument.Save(stream);

            //Close the document

            pdfDocument.Close(true);

 

            await Runtime.InvokeVoidAsync("exportSave", new object[] { "output.pdf", Convert.ToBase64String(stream.ToArray()) });

 

 

        }

    }

 

    static void PdfGrid_BeginCellLayout(object sender, PdfGridBeginCellLayoutEventArgs args)

    {

        if (args.CellIndex == 1 && args.Value != "Customer Name")

        {

            //Create the font.

            PdfFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 12f);

            //Create the Text Web Link.

            PdfTextWebLink textLink = new PdfTextWebLink();

 

            textLink.Font = font;

            //Set the hyperlink.

            textLink.Url = http://www.syncfusion.com;

            //Set the link text.

            textLink.Text = args.Value;

            RectangleF bounds = new RectangleF(args.Bounds.X, args.Bounds.Y, args.Bounds.Width, args.Bounds.Height);

            args.Graphics.DrawRectangle(new PdfPen(Color.Black), bounds);

            //Draw the hyperlink in PDF page.

            textLink.DrawTextWebLink(args.Graphics, new PointF(args.Bounds.X, args.Bounds.Y));

            //textLink.Pen.Color = brush;

            args.Skip = true;

 

        }

    }

Reference: https://help.syncfusion.com/file-formats/pdf/working-with-hyperlinks?_ga=2.169089506.271787141.1675053464-1012522953.1649837807&_gac=1.23710024.1672917030.CjwKCAiAh9qdBhAOEiwAvxIok00i_Se0N8QCibS4-NgbQ2glRDB5zDOlaJBSi_y8P2PwigSZi3hFnhoC0fYQAvD_BwE#working-with-web-navigation

Please get back to us if you need further assistance.

Regards,
Prathap S

Attachment: BlazorDataGrid_aa122289.zip