Yashir Khan

Yashir Khan

  • NA
  • 26
  • 5k

How to convert HTML Div to PDF in Asp.Net MVC with position?

Jun 16 2020 11:29 PM
I am trying to convert HTML Div to PDF in Asp.Net MVC. I have tried with iTextSharp and iText7 but the result is not as per my expectation. Div contains many images as base64 also after image there is some div which I have set with position over those image tags. I want PDF as shown in the below image.
 
 
 
 
 However it's showing pdf like below :
 
 
enter image description here
 
 
Also I have HTML code is like below : 
  1. <div id="mainDiv" style="margin-top:-2.5%">     
  2.    <div class="droppable ui-droppable" style="margin-left:20%;">     
  3.      <div>     
  4.         <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...Base64 String">     
  5.      </div>     
  6.      <div class="ui-visual-focus textboxDraggable ui-draggable ui-draggable-handle ui-draggable-dragging ui-resizable" style="width: 291px; display: inline-block; position: absolute; z-index: 10; left: 469px; top: 245.438px; height: 26px;; font-family:Arial; font-size:14;" data-type="textbox" id="textbox_1" data-class="temp" onclick="clickMe(this)" data-name="FirstName">    
  7.         Testing    
  8.      </div>     
  9.      <div class="ui-visual-focus textboxDraggable ui-draggable ui-draggable-handle ui-draggable-dragging ui-resizable" style="width: 281px; display: inline-block; z-index: 10; position: absolute; left: 470px; top: 325.797px; height: 33px;; font-family:Arial; font-size:14;" data-type="textbox" id="textbox_2" data-class="temp" onclick="clickMe(this)" data-name="LastName">    
  10.         Testing Demo    
  11.      </div>     
  12.    </div>     
  13. </div>   
And in controller side, I am passing div as string. And in the controller side my code is like below :
  1. [HttpPost, ValidateInput(false)]    
  2. public FileResult HtmlToPdf(string GridHtml)    
  3. {    
  4.     var workStream = new MemoryStream();    
  5.     using(var pdfWriter = new PdfWriter(workStream))    
  6.     {    
  7.        pdfWriter.SetCloseStream(false);    
  8.        using(var document = HtmlConverter.ConvertToDocument(GridHtml, pdfWriter))    
  9.        {}    
  10.     }    
  11.     workStream.Position = 0;    
  12.     return new FileStreamResult(workStream, "application/pdf");    
  13. }  
So please guide me that how can I generate PDF from HTML Div which looks same as displayed in the browser. PDF should display a base64 image and also need to display all other div's text and value at the proper position. Please guide me to convert HTML Div to PDF as expected. 

So draggable div is not placing on pdf with proper position. Which we need to achieve. 

Answers (3)