Is there a way to add particular <div> tags into a pdf on a button click in a vf page using javascript or the apex controller?

Question

I know we can use the renderAs property to get whole vf pages as a pdf but I don't want that. I want particular tags in my pdf. I need a 'view/print pdf' button which opens the pdf in a new tab. I can use javascript or apex without any restrictions. Here is a little bit of code and screenshots for reference:

 <div class="slds-form-element" id="div1">
     <div class="slds-grid slds-gutters_small">  
          <div class="slds-col slds-has-flexi-truncate" role="listitem">
              <div class="slds-form-element slds-form-element_edit slds-hint-parent">
                   <span class="slds-form-element__label"><b>{!$ObjectType['Credit_Applicant__c'].fields['Federal_Tax_ID__c'].Label}&nbsp;:</b></span>
                        <div class="slds-form-element__control">
                             <span class="slds-form-element__static slds-border_bottom">{!creditApplicantRecord.Federal_Tax_ID__c}</span>
                                        </div>
                                    </div>
                                </div>
                    <div class="slds-col slds-has-flexi-truncate" role="listitem">
                         <div class="slds-form-element slds-form-element_edit slds-hint-parent">
                                  <span class="slds-form-element__label"><b>{!$ObjectType['Credit_Applicant__c'].fields['DUNS_Number__c'].Label}&nbsp;:</b></span>
                                        <div class="slds-form-element__control">
                                            <span class="slds-form-element__static slds-border_bottom">{!creditApplicantRecord.DUNS_Number__c}</span>
                                        </div>
                                    </div>
                                </div>

This is the footer with the print button that should open a pdf in a new tab

Answer 1

What you need is to create a controller, and inside controller you can create dynamic apex tags (or reRender some portion of the page with new added elements) and then use following getContentAsPDF method in your controller method called via render PDF button.

getContentAsPDF

Returns the page in PDF, regardless of the apex:page component’s renderAs attribute.