Dynamic show image in html and output to pdf? RSS

• • Reply
  snufkin10

  Member

  2 Points

  7 Posts

  Dynamic show image in html and output to pdf?

  Jul 04, 2013 05:48 AM|snufkin10|LINK

  I have a web to show project infomations and it's images.  Different project will have different number of images.

  How can I show it in dynamic?

   

  @using iTextSharp.text;
  @using iTextSharp.text.pdf;
  
  @{
      Layout = "~/_Layout.cshtml";
  
      var PJReferenceEng = "";
      var PJReferenceChin = "";
      var PJLocation ="";
      var PJDeveloper = "";
      var PJDesigner ="";
      var PJCompleteDate ="";
      var PJDetails ="";
      var ProjectID ="";
      var PJType ="";
      var PJDescription="";
      int NoOfImage=0;
      
  
              ProjectID = Request.QueryString["ProjectID"];
  
              var db = Database.Open("SOURCEDATA");
              var sqlcommand = "SELECT PJReferenceEng, PJReferenceChin, " +
                  "CASE PJDistrict WHEN 000 THEN 'Hong Kong Island'  " +
  				"WHEN 001 THEN 'Kowloon' WHEN 002 THEN 'New Territories & Outlying Islands' " +
                  "WHEN 003 THEN 'Macau' WHEN 004 THEN 'China' ELSE 'Others' END AS PJDistrict, " +
                  "PJYEAR, PJLocation, PJDeveloper, " +
                  "PJDesigner, PJCompleteDate, PJDetails, " +
                  "Case PJType WHEN 000 THEN 'Commercial' WHEN 001 THEN 'Hospitality' " +
                  "WHEN 002 THEN 'Infrastructure' WHEN 003 THEN 'Residential' ELSE 'Show Flat' END AS PJTYPE, PJDescription, NoOfImage " +
                  "from ARN_WEB_PJREF WHERE ProjectID = @0";
              var row = db.QuerySingle(sqlcommand,ProjectID);
              PJReferenceEng = row.PJReferenceEng;
              PJReferenceChin = row.PJReferenceChin;
              PJLocation = row.PJLocation;
              PJDeveloper = row.PJDeveloper;
              PJDesigner = row.PJDesigner;
              PJCompleteDate = row.PJCompleteDate;
              PJDetails = row.PJDetails;
              PJType = row.PJType;
              PJDescription = row.PJDescription;
              NoOfImage=row.NoOfImage;
  
      
              var imagemain="./src/"+ ProjectID + "/main.jpg";
             
              var image1 ="./src/"+ ProjectID + "/1.jpg";
              var image2 ="./src/"+ ProjectID + "/2.jpg";
              var image3 ="./src/"+ ProjectID + "/3.jpg";
              var image4 ="./src/"+ ProjectID + "/4.jpg";
              var image5 ="./src/"+ ProjectID + "/5.jpg";
              var image6 ="./src/"+ ProjectID + "/6.jpg";
              var image7 ="./src/"+ ProjectID + "/7.jpg";
              var image8 ="./src/"+ ProjectID + "/8.jpg";
              var image9 ="./src/"+ ProjectID + "/9.jpg";
              var image10 ="./src/"+ ProjectID + "/10.jpg";
              var image11 ="./src/"+ ProjectID + "/11.jpg";
              var image12 ="./src/"+ ProjectID + "/12.jpg";
              var image13 ="./src/"+ ProjectID + "/13.jpg";
              var image14 ="./src/"+ ProjectID + "/14.jpg";
              var image15 ="./src/"+ ProjectID + "/15.jpg";
              var image16 ="./src/"+ ProjectID + "/16.jpg";
              var image17 ="./src/"+ ProjectID + "/17.jpg";
              var image18 ="./src/"+ ProjectID + "/18.jpg";
              var image19 ="./src/"+ ProjectID + "/19.jpg";
              var image20 ="./src/"+ ProjectID + "/20.jpg";
              var image21 ="./src/"+ ProjectID + "/21.jpg";
              var image22 ="./src/"+ ProjectID + "/22.jpg";
              var image23 ="./src/"+ ProjectID + "/23.jpg";
              var image24 ="./src/"+ ProjectID + "/24.jpg";
              var image25 ="./src/"+ ProjectID + "/25.jpg";
              var image26 ="./src/"+ ProjectID + "/26.jpg";
              var image27 ="./src/"+ ProjectID + "/27.jpg";
              var image28 ="./src/"+ ProjectID + "/28.jpg";
              var image29 ="./src/"+ ProjectID + "/29.jpg";
              var image30 ="./src/"+ ProjectID + "/30.jpg";
     
      if(Request["Action"] == "Print"){
  
          var pdfpath = Server.MapPath("PDF/ProjectRef.pdf");
          var srcpath = Server.MapPath("src");
  
          Font times10 = FontFactory.GetFont(FontFactory.TIMES, 10);
          Font times14 = FontFactory.GetFont(FontFactory.TIMES,14);
  
          Document doc = new Document();
          doc.SetMargins(45f, 45f, 35f, 35f);
          PdfWriter writer = PdfWriter.GetInstance(doc, new FileStream(pdfpath, FileMode.Create));
  
          doc.Open();
  
          Chunk chunk = new Chunk("Project Reference", times14);
          chunk.SetUnderline(1f,-1.5f);
          Phrase p1 = new Phrase(chunk);
          Paragraph p = new Paragraph();
          p.Add(p1);
          doc.Add(new Paragraph(p));
  
          
       	var table = new PdfPTable(3);
          float[] widths = new float[] {80f,320f,130f};
          table.SetWidths(widths);
          table.WidthPercentage = (100f);
          
          PdfPCell content = new PdfPCell(new Phrase("Project Name:",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase(PJReferenceEng,times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase("",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
  
          content = new PdfPCell(new Phrase("Location:",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase(PJLocation,times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase("",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          
          content = new PdfPCell(new Phrase("Developer:",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase(PJDeveloper,times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase("",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          
          content = new PdfPCell(new Phrase("Designer:",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase(PJDesigner,times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase("",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
  
          content = new PdfPCell(new Phrase("Completion Date:",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase(PJCompleteDate,times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase("",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
  
          content = new PdfPCell(new Phrase("Details:",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase(PJDetails,times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase("",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
  
          content = new PdfPCell(new Phrase("Description:",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          content = new PdfPCell(new Phrase(PJDescription,times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          table.SpacingBefore= 10f;
          content = new PdfPCell(new Phrase("",times10));
          content.BorderWidth = 0f;
          table.AddCell(content);
          doc.Add(table);
          
          Image jpg = Image.GetInstance(srcpath + "/" + ProjectID + "/main.jpg");
          jpg.ScaleToFit(120f,120f);
          jpg.SetAbsolutePosition(420,670);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
          PdfContentByte cb = writer.DirectContent;
          cb.MoveTo(50, 640);
          cb.LineTo(560, 640);
          cb.Stroke();
  
          jpg = Image.GetInstance(srcpath + "/" + ProjectID + "/1.jpg");
          jpg.ScaleToFit(250f,250f);
          jpg.SetAbsolutePosition(50,380);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
          jpg = Image.GetInstance(srcpath + "/" + ProjectID + "/2.jpg");
          jpg.ScaleToFit(250f,250f);
          jpg.SetAbsolutePosition(310,380);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
          jpg = Image.GetInstance(srcpath + "/" + ProjectID + "/3.jpg");
          jpg.ScaleToFit(250f,250f);
          jpg.SetAbsolutePosition(50, 120);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
          jpg = Image.GetInstance(srcpath + "/" + ProjectID + "/4.jpg");
          jpg.ScaleToFit(250f,250f);
          jpg.SetAbsolutePosition(310, 120);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
          
  
          jpg = Image.GetInstance(srcpath + "/arnholdlogo.jpg");
          jpg.ScaleToFit(120,30);
          jpg.SetAbsolutePosition(400,20);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
  
          doc.NewPage();
          jpg = Image.GetInstance(srcpath + "/" + ProjectID + "/5.jpg");
          jpg.ScaleToFit(250f,250f);
          jpg.SetAbsolutePosition(50,380);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
          jpg = Image.GetInstance(srcpath + "/" + ProjectID + "/6.jpg");
          jpg.ScaleToFit(250f,250f);
          jpg.SetAbsolutePosition(310,380);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
          jpg = Image.GetInstance(srcpath + "/" + ProjectID + "/7.jpg");
          jpg.ScaleToFit(250f,250f);
          jpg.SetAbsolutePosition(50, 120);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
          jpg = Image.GetInstance(srcpath + "/" + ProjectID + "/8.jpg");
          jpg.ScaleToFit(250f,250f);
          jpg.SetAbsolutePosition(310, 120);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
          
  
          jpg = Image.GetInstance(srcpath + "/arnholdlogo.jpg");
          jpg.ScaleToFit(120,30);
          jpg.SetAbsolutePosition(400,20);
          jpg.Alignment = Element.ALIGN_CENTER;
          doc.Add(jpg);
  
          doc.Close();
       
          Response.AddHeader("Content-Type", "application/pdf");
          Response.AddHeader("content-disposition", "attachment;filename=ProjectRef.pdf");
          Response.TransmitFile(pdfpath);
      }
  }
  
  <!DOCTYPE html>
  
  <html lang="en">
      <head>
          <title>Arnhold & Co., Ltd.</title>
          <style type="text/css">
            .grid { margin: 4px; border-collapse: collapse; width: 600px; }
            .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
            .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
            .alt { background-color: #E8E8E8; color: #000; }
          </style>
          <!-- Start VisualLightBox.com HEAD section -->
          <link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css">
          <link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen">
          <script src="engine/js/jquery.min.js" type="text/javascript"></script>
          <script src="engine/js/visuallightbox.js" type="text/javascript"></script>
          <!-- End VisualLightBox.com HEAD section -->
  
          
      </head>
      <body>
          @Html.ValidationSummary()
          <form method="post">
              <fieldset>
              <div id="main">
              <table width="100%" border="0">
                  
                  <tr>
                  <table width="70%"  align="left">
                      <tr>
                          <td width="20%">Project Name (ENG):</td>
                          <td>@PJReferenceEng</td>
                      </tr>
                      <tr>
                          <td width="20%">Project Name (CHIN):</td>
                          <td>@PJReferenceChin</td>
                      </tr>
                      <tr>
                          <td width="20%">Location:</td>
                          <td>@PJLocation</td>
                      </tr>
                      <tr>
                          <td width="20%">Developer:</td>
                          <td>@PJDeveloper</td>
                      </tr>
                      <tr>
                          <td width="20%">Designer:</td>
                          <td>@PJDesigner</td>
                      </tr>
                      <tr>
                          <td width="20%">Project Type:</td>
                          <td>@PJType</td>
                      </tr>
                      <tr>
                          <td width="20%">Completion Date:</td>
                          <td>@PJCompleteDate</td>
                      </tr>
                      <tr>
                          <td width="20%">Details:</td>
                          <td>@PJDetails</td>
                      </tr>
                      <tr>
                          <td width="20%">Description:</td>
                          <td>@PJDescription</td>
                      </tr>
                  </table>
                  </tr>
  
                  <tr>
                  <table width="30%" align="right">
                      <tr>
                          <td><p><img width="185" height="185" border="0" src=@imagemain></p></td>
                          <br>
                          </tr>
                  </table>
                  </tr>
              </table>
              </div>
              </fieldset>
              <tr><td><input type="Submit" name="Action" value ="Print" /></td></tr>
              <br>
              <br>
              <br>
  
              <div id="main">
              <table>
                  <tr>
                      <td><p><a class="vlightbox1" href=@image1 title="Image1"><img width="185" height="185" border="0" src=@image1 ></a></p></td>
                      <td><p><a class="vlightbox1" href=@image2 title="Image2"><img width="185" height="185" border="0" src=@image2></a></p></td>
                      <td><p><a class="vlightbox1" href=@image3 title="Image3"><img width="185" height="185" border="0" src=@image3></a></p></td>
                      <td><p><a class="vlightbox1" href=@image4 title="Image4"><img width="185" height="185" border="0" src=@image4></a></p></td>
                      <td><p><a class="vlightbox1" href=@image5 title="Image5"><img width="185" height="185" border="0" src=@image5></a></p></td>
                  </tr>
                  <tr>
                      <td><p><a class="vlightbox1" href=@image6 title="Image6"><img width="185" height="185" border="0" src=@image6></a></p></td>
                      <td><p><a class="vlightbox1" href=@image7 title="Image7"><img width="185" height="185" border="0" src=@image7></a></p></td>
                      <td><p><a class="vlightbox1" href=@image8 title="Image8"><img width="185" height="185" border="0" src=@image8></a></p></td>
                      <td><p><a class="vlightbox1" href=@image9 title="Image9"><img width="185" height="185" border="0" src=@image9></a></p></td>
                      <td><p><a class="vlightbox1" href=@image10 title="Image10"><img width="185" height="185" border="0" src=@image10></a></p></td>
                  </tr>
                  <tr>
                      <td><p><a class="vlightbox1" href=@image11 title="Image11"><img width="185" height="185" border="0" src=@image11></a></p></td>
                      <td><p><a class="vlightbox1" href=@image12 title="Image12"><img width="185" height="185" border="0" src=@image12></a></p></td>
                      <td><p><a class="vlightbox1" href=@image13 title="Image13"><img width="185" height="185" border="0" src=@image13></a></p></td>
                      <td><p><a class="vlightbox1" href=@image14 title="Image14"><img width="185" height="185" border="0" src=@image14></a></p></td>
                      <td><p><a class="vlightbox1" href=@image15 title="Image15"><img width="185" height="185" border="0" src=@image15></a></p></td>
                  </tr>
                  <tr>
                      <td><p><a class="vlightbox1" href=@image16 title="Image16"><img width="185" height="185" border="0" src=@image16></a></p></td>
                      <td><p><a class="vlightbox1" href=@image17 title="Image17"><img width="185" height="185" border="0" src=@image17></a></p></td>
                      <td><p><a class="vlightbox1" href=@image18 title="Image18"><img width="185" height="185" border="0" src=@image18></a></p></td>
                      <td><p><a class="vlightbox1" href=@image19 title="Image19"><img width="185" height="185" border="0" src=@image19></a></p></td>
                      <td><p><a class="vlightbox1" href=@image20 title="Image20"><img width="185" height="185" border="0" src=@image20></a></p></td>
                  </tr>
                  <tr>
                      <td><p><a class="vlightbox1" href=@image21 title="Image21"><img width="185" height="185" border="0" src=@image21></a></p></td>
                      <td><p><a class="vlightbox1" href=@image22 title="Image22"><img width="185" height="185" border="0" src=@image22></a></p></td>
                      <td><p><a class="vlightbox1" href=@image23 title="Image23"><img width="185" height="185" border="0" src=@image23></a></p></td>
                      <td><p><a class="vlightbox1" href=@image24 title="Image24"><img width="185" height="185" border="0" src=@image24></a></p></td>
                      <td><p><a class="vlightbox1" href=@image25 title="Image25"><img width="185" height="185" border="0" src=@image25></a></p></td>
                  </tr>
                  <tr>
                      <td><p><a class="vlightbox1" href=@image26 title="Image26"><img width="185" height="185" border="0" src=@image26></a></p></td>
                      <td><p><a class="vlightbox1" href=@image27 title="Image27"><img width="185" height="185" border="0" src=@image27></a></p></td>
                      <td><p><a class="vlightbox1" href=@image28 title="Image28"><img width="185" height="185" border="0" src=@image28></a></p></td>
                      <td><p><a class="vlightbox1" href=@image29 title="Image29"><img width="185" height="185" border="0" src=@image29></a></p></td>
                      <td><p><a class="vlightbox1" href=@image30 title="Image30"><img width="185" height="185" border="0" src=@image30></a></p></td>
                  </tr>
              </table>
               </div>
     </body>

• • Reply
  kashyapa

  Participant

  1076 Points

  320 Posts

  MVP

  Re: Dynamic show image in html and output to pdf?

  Jul 29, 2013 12:32 PM|kashyapa|LINK

  hi

  is it possible for you to please make your question more clear to understand. I cant really make out what is the problem statement you are trying to make here? So can you please take a moment to elaborate your problem ?

  Lohith G N
  http://about.me/kashyapa
  
• • Reply
  Afzaal.Ahmad...

  Contributor

  4010 Points

  1926 Posts

  Re: Dynamic show image in html and output to pdf?

  Jul 29, 2013 03:26 PM|Afzaal.Ahmad.Zeeshan|LINK

  Showing dynamic images require you to have an array of names of images, so that after changing the data you don't need to reload the page to view next image you just skip it to the next one! Secondly, you can save the image to PDF, by using some helpers!

  Read more of my web development posts on my website. Thank you.