locked
.aspx page screen short on page load using asp.net web forms RRS feed

  • Question

  • User-471420332 posted

    .aspx page full page screen short on page load using C# asp.net web forms, the reason want to take screen short because i have big application form that want screenshot to download full page image.

     protected void Page_Load(object sender, EventArgs e)
    {
        HttpWebRequest request = HttpWebRequest.Create("https://www.google.com/") as HttpWebRequest;
        Bitmap bitmap;
        using (Stream stream = request.GetResponse().GetResponseStream())
        {
            bitmap = new Bitmap(stream);
        }
        // now that you have a bitmap, you can do what you need to do...
    }

    i am getting below

    System.ArgumentException: Parameter is not valid.   //on this line  bitmap = new Bitmap(stream);

    Actually my requirement is to generate PDF on page load but some buddy told in the blogs, using itextsharp is not possible to generate pdf same like page, because i have some style boostrap design in page have 10 pages size. Please help to solve my issue or best shortest solution to acchieve my requirements. Thanks for your valuable reply

    Thursday, August 8, 2019 5:31 AM

Answers

  • User665608656 posted

    Hi mazhar,

    According to your description, I recommend that you download the PDF file by generating image first, then convert the image to pdf.

    Based on your needs, I created a paging table with bootstrap and jQuery datatable, to convert full aspx page to image, you can use html2canvas to achieve it.

    You can refer to this link :  PUBLIC Stack Overflow Tags Users Jobs TEAMS What’s this? Q&A for Work Using HTML5/Canvas/JavaScript to take in-browser screenshots

    How to convert image to PDF in the code behind, you can refer to : C# - How to convert an image to a PDF (using a free library) [closed]

    For more details , you could refer to the following code ( remember to nuget package PDFConverter):

    aspx:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
        <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    
    
        <script>
    window.onload = function(){
    var region = document.querySelector("#topdf"); // whole screen
      html2canvas(region, {
        onrendered: function(canvas) {
          var pngUrl = canvas.toDataURL(); // png in dataURL format  
            pngUrl = pngUrl.replace('data:image/png;base64,', '');
                $.ajax({
                    type: 'POST',
                    url: 'WebForm_0809_2158573_xx.aspx/UploadImage',
                    data: '{ imageData : "' + pngUrl + '" }',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json'
                }); 
        },
      });
    }
        </script>
    
        <script type="text/javascript"> 
     
    $(document).ready(function () { 
      $('#dtBasicExample').DataTable({
        "paging": true ,
      });
      $('.dataTables_length').addClass('bs-select');
    
    });
        </script>
    
    </head>
    <body >
        <div id="topdf">
            <h1>Data Show</h1>
            <div style="width: 900px" id="div">
                <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th class="th-sm">Name
    
                            </th>
                            <th class="th-sm">Position
    
                            </th>
                            <th class="th-sm">Office
    
                            </th>
                            <th class="th-sm">Age
    
                            </th>
                            <th class="th-sm">Start date
    
                            </th>
                            <th class="th-sm">Salary
    
                            </th>
                        </tr>
                    </thead>
                    <tbody>
    
                        <tr>
                            <td>Prescott Bartlett</td>
                            <td>Technical Author</td>
                            <td>London</td>
                            <td>27</td>
                            <td>2011/05/07</td>
                            <td>$145,000</td>
                        </tr>
                        <tr>
                            <td>Gavin Cortez</td>
                            <td>Team Leader</td>
                            <td>San Francisco</td>
                            <td>22</td>
                            <td>2008/10/26</td>
                            <td>$235,500</td>
                        </tr>
    
                        <tr>
                            <td>Zorita Serrano</td>
                            <td>Software Engineer</td>
                            <td>San Francisco</td>
                            <td>56</td>
                            <td>2012/06/01</td>
                            <td>$115,000</td>
                        </tr>
                        <tr>
                            <td>Jennifer Acosta</td>
                            <td>Junior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>43</td>
                            <td>2013/02/01</td>
                            <td>$75,650</td>
                        </tr>
                        <tr>
                            <td>Cara Stevens</td>
                            <td>Sales Assistant</td>
                            <td>New York</td>
                            <td>46</td>
                            <td>2011/12/06</td>
                            <td>$145,600</td>
                        </tr>
                        <tr>
                            <td>Hermione Butler</td>
                            <td>Regional Director</td>
                            <td>London</td>
                            <td>47</td>
                            <td>2011/03/21</td>
                            <td>$356,250</td>
                        </tr>
                        <tr>
                            <td>Lael Greer</td>
                            <td>Systems Administrator</td>
                            <td>London</td>
                            <td>21</td>
                            <td>2009/02/27</td>
                            <td>$103,500</td>
                        </tr>
                        <tr>
                            <td>Jonas Alexander</td>
                            <td>Developer</td>
                            <td>San Francisco</td>
                            <td>30</td>
                            <td>2010/07/14</td>
                            <td>$86,500</td>
                        </tr>
                        <tr>
                            <td>Shad Decker</td>
                            <td>Regional Director</td>
                            <td>Edinburgh</td>
                            <td>51</td>
                            <td>2008/11/13</td>
                            <td>$183,000</td>
                        </tr>
                        <tr>
                            <td>Michael Bruce</td>
                            <td>Javascript Developer</td>
                            <td>Singapore</td>
                            <td>29</td>
                            <td>2011/06/27</td>
                            <td>$183,000</td>
                        </tr>
                        <tr>
                            <td>Donna Snider</td>
                            <td>Customer Support</td>
                            <td>New York</td>
                            <td>27</td>
                            <td>2011/01/25</td>
                            <td>$112,000</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Name
                            </th>
                            <th>Position
                            </th>
                            <th>Office
                            </th>
                            <th>Age
                            </th>
                            <th>Start date
                            </th>
                            <th>Salary
                            </th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </body>
    
    </html>
    

    cs:

      [WebMethod]
            public static void UploadImage(string imageData)
            {
    //output .png image using (FileStream fs = new FileStream(@"C:\Users\yongqy\Desktop\testpic.png", FileMode.Create)) { using (BinaryWriter bw = new BinaryWriter(fs)) { bw.Write(Convert.FromBase64String(imageData)); bw.Close(); } }
    // then convert the image to pdf PdfHelper.Instance.SaveImageAsPdf(@"C:\Users\yongqy\Desktop\testpic.png", @"C:\Users\yongqy\Desktop\screen.pdf", 1000, true); }

    PdfHelper.cs

     public class PdfHelper
        {
            private PdfHelper()
            {
            }
    
            public static PdfHelper Instance { get; } = new PdfHelper();
    
            internal void SaveImageAsPdf(string imageFileName, string pdfFileName, int width = 600, bool deleteImage = false)
            {
                using (var document = new PdfDocument())
                {
                    PdfPage page = document.AddPage();
                    using (XImage img = XImage.FromFile(imageFileName))
                    {
                        // Calculate new height to keep image ratio
                        var height = (int)(((double)width / (double)img.PixelWidth) * img.PixelHeight);
    
                        // Change PDF Page size to match image
                        page.Width = width;
                        page.Height = height;
    
                        XGraphics gfx = XGraphics.FromPdfPage(page);
                        gfx.DrawImage(img, 0, 0, width, height);
                    }
                    document.Save(pdfFileName);
                }
    
                if (deleteImage)
                    File.Delete(imageFileName);
            }
        }

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 9, 2019 9:11 AM

All replies

  • User-1038772411 posted

    Hello, mazhar khan india

    please refer below code link for how to capture screen image using c#.

    in below artical code is in button event, but as per your need you can that on page load only.

    https://www.c-sharpcorner.com/UploadFile/0c1bb2/capture-screen-shots-of-page-using-Asp-Net-C-Sharp-without-script/

    Thanks.

    Thursday, August 8, 2019 6:34 AM
  • User665608656 posted

    Hi mazhar,

    According to your description, I recommend that you download the PDF file by generating image first, then convert the image to pdf.

    Based on your needs, I created a paging table with bootstrap and jQuery datatable, to convert full aspx page to image, you can use html2canvas to achieve it.

    You can refer to this link :  PUBLIC Stack Overflow Tags Users Jobs TEAMS What’s this? Q&A for Work Using HTML5/Canvas/JavaScript to take in-browser screenshots

    How to convert image to PDF in the code behind, you can refer to : C# - How to convert an image to a PDF (using a free library) [closed]

    For more details , you could refer to the following code ( remember to nuget package PDFConverter):

    aspx:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
        <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    
    
        <script>
    window.onload = function(){
    var region = document.querySelector("#topdf"); // whole screen
      html2canvas(region, {
        onrendered: function(canvas) {
          var pngUrl = canvas.toDataURL(); // png in dataURL format  
            pngUrl = pngUrl.replace('data:image/png;base64,', '');
                $.ajax({
                    type: 'POST',
                    url: 'WebForm_0809_2158573_xx.aspx/UploadImage',
                    data: '{ imageData : "' + pngUrl + '" }',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json'
                }); 
        },
      });
    }
        </script>
    
        <script type="text/javascript"> 
     
    $(document).ready(function () { 
      $('#dtBasicExample').DataTable({
        "paging": true ,
      });
      $('.dataTables_length').addClass('bs-select');
    
    });
        </script>
    
    </head>
    <body >
        <div id="topdf">
            <h1>Data Show</h1>
            <div style="width: 900px" id="div">
                <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th class="th-sm">Name
    
                            </th>
                            <th class="th-sm">Position
    
                            </th>
                            <th class="th-sm">Office
    
                            </th>
                            <th class="th-sm">Age
    
                            </th>
                            <th class="th-sm">Start date
    
                            </th>
                            <th class="th-sm">Salary
    
                            </th>
                        </tr>
                    </thead>
                    <tbody>
    
                        <tr>
                            <td>Prescott Bartlett</td>
                            <td>Technical Author</td>
                            <td>London</td>
                            <td>27</td>
                            <td>2011/05/07</td>
                            <td>$145,000</td>
                        </tr>
                        <tr>
                            <td>Gavin Cortez</td>
                            <td>Team Leader</td>
                            <td>San Francisco</td>
                            <td>22</td>
                            <td>2008/10/26</td>
                            <td>$235,500</td>
                        </tr>
    
                        <tr>
                            <td>Zorita Serrano</td>
                            <td>Software Engineer</td>
                            <td>San Francisco</td>
                            <td>56</td>
                            <td>2012/06/01</td>
                            <td>$115,000</td>
                        </tr>
                        <tr>
                            <td>Jennifer Acosta</td>
                            <td>Junior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>43</td>
                            <td>2013/02/01</td>
                            <td>$75,650</td>
                        </tr>
                        <tr>
                            <td>Cara Stevens</td>
                            <td>Sales Assistant</td>
                            <td>New York</td>
                            <td>46</td>
                            <td>2011/12/06</td>
                            <td>$145,600</td>
                        </tr>
                        <tr>
                            <td>Hermione Butler</td>
                            <td>Regional Director</td>
                            <td>London</td>
                            <td>47</td>
                            <td>2011/03/21</td>
                            <td>$356,250</td>
                        </tr>
                        <tr>
                            <td>Lael Greer</td>
                            <td>Systems Administrator</td>
                            <td>London</td>
                            <td>21</td>
                            <td>2009/02/27</td>
                            <td>$103,500</td>
                        </tr>
                        <tr>
                            <td>Jonas Alexander</td>
                            <td>Developer</td>
                            <td>San Francisco</td>
                            <td>30</td>
                            <td>2010/07/14</td>
                            <td>$86,500</td>
                        </tr>
                        <tr>
                            <td>Shad Decker</td>
                            <td>Regional Director</td>
                            <td>Edinburgh</td>
                            <td>51</td>
                            <td>2008/11/13</td>
                            <td>$183,000</td>
                        </tr>
                        <tr>
                            <td>Michael Bruce</td>
                            <td>Javascript Developer</td>
                            <td>Singapore</td>
                            <td>29</td>
                            <td>2011/06/27</td>
                            <td>$183,000</td>
                        </tr>
                        <tr>
                            <td>Donna Snider</td>
                            <td>Customer Support</td>
                            <td>New York</td>
                            <td>27</td>
                            <td>2011/01/25</td>
                            <td>$112,000</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Name
                            </th>
                            <th>Position
                            </th>
                            <th>Office
                            </th>
                            <th>Age
                            </th>
                            <th>Start date
                            </th>
                            <th>Salary
                            </th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </body>
    
    </html>
    

    cs:

      [WebMethod]
            public static void UploadImage(string imageData)
            {
    //output .png image using (FileStream fs = new FileStream(@"C:\Users\yongqy\Desktop\testpic.png", FileMode.Create)) { using (BinaryWriter bw = new BinaryWriter(fs)) { bw.Write(Convert.FromBase64String(imageData)); bw.Close(); } }
    // then convert the image to pdf PdfHelper.Instance.SaveImageAsPdf(@"C:\Users\yongqy\Desktop\testpic.png", @"C:\Users\yongqy\Desktop\screen.pdf", 1000, true); }

    PdfHelper.cs

     public class PdfHelper
        {
            private PdfHelper()
            {
            }
    
            public static PdfHelper Instance { get; } = new PdfHelper();
    
            internal void SaveImageAsPdf(string imageFileName, string pdfFileName, int width = 600, bool deleteImage = false)
            {
                using (var document = new PdfDocument())
                {
                    PdfPage page = document.AddPage();
                    using (XImage img = XImage.FromFile(imageFileName))
                    {
                        // Calculate new height to keep image ratio
                        var height = (int)(((double)width / (double)img.PixelWidth) * img.PixelHeight);
    
                        // Change PDF Page size to match image
                        page.Width = width;
                        page.Height = height;
    
                        XGraphics gfx = XGraphics.FromPdfPage(page);
                        gfx.DrawImage(img, 0, 0, width, height);
                    }
                    document.Save(pdfFileName);
                }
    
                if (deleteImage)
                    File.Delete(imageFileName);
            }
        }

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 9, 2019 9:11 AM