+ Start a Discussion
Alex Waddell 17Alex Waddell 17 

How to download a VF page as PDF after using SLDS formatting

Hello everyone,

After spending a few days creating a VF page using the new SLDS markup i learned that I cannot use the renderAs = "PDF" to make my VF page into a PDF...

When I add the renderAs = "PDF", I get the error: An internal server error has occurred.

Seeing that downloading our VF page is essential to our needs, Does anyone have any ideas on how to make a PDF when using SLDS?

Would i have to rewrite my VF page without using any of the new SLDS? or is there some way around this?

Below is my code in case that's helpful to you:
 
<apex:page standardcontroller="Correspondence__c" >
<head>
  <!-- Import the Design System style sheet -->
  <apex:slds />
</head>
    <body class="slds-scope">        
        <div class="slds-grid slds-grid_vertical-align-end slds-grid_align-spread" style="height:100px">
            <div class="slds-col slds-p-horizontal_medium">
                <span><apex:image url="/servlet/servlet.FileDownload?file=0151N000002lmHx" width="256" height="150"/> </span>
            </div>
            <div class="slds-col slds-text-heading_large slds-text-align_center">
                <span>Case Information</span>
            </div>
            <div class="slds-col slds-p-horizontal_medium slds-text-heading_medium slds-text-align_right">
                <span>Form 2068<br></br>December 2012-E</span>
        </div>        
    </div>
 <Div class="slds-scope" style="float:Right;margin-right: 400px;">
    <div class="slds-scope slds-text-heading--label slds-m-bottom--small">
    <p class="slds-text-heading--label slds-m-bottom--small"> <br></br>
      From:  
        </p>
<div class="slds-box" Style="height:100px;width:300px;">
        Outreach Health Services<br/>
        1234 West East Street Tempe, AZ 85281
  </div>
</Div>
  </div>
    <br></br>
  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds-scope" style="float:Left; Position:Absolute; width:100%">
    <!-- MASTHEAD -->

    <p class="slds-text-heading--label slds-m-bottom--small" style="margin-left:50px;">
      To:  
        </p>
         <div class="slds-box" style="float:Left; margin-left:50px; height:100px;width:300px; ">
         <apex:outputField value="{!Correspondence__c.Payer_Name__c}"/><br/>
        <apex:outputField value="{!Correspondence__c.Payer_Fax_Number__c}"/>
</div>

      <br></br>  <br></br>  <br></br>
    <div class="slds-scope" style="float:Left; position:absolute; width:100%">  
      <br></br>  <br></br>  <br></br>  <br></br>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Case Name">Case Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 1">Category</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Case Number 1">Case Number</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 2">Category</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Case Number 2">Case Number</div>
      </th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td scope="row" data-label="Case Name">
        <div class="slds-truncate" title="Current Case Name">{!Correspondence__c.Case_Name__c}</div>
      </td>
      <td scope="row" data-label="Category 1">
        <div class="slds-truncate" title="Category 1">PERS</div>
      </td>
        <td scope="row" data-label="Case Number 1">
        <div class="slds-truncate" title="Case Number 1">1234567</div>
      </td>
      <td scope="row" data-label="Category 2">
        <div class="slds-truncate" title="Category 2"></div>
      </td>
        <td scope="row" data-label="Case Number 2">
        <div class="slds-truncate" title="Case Number 2"></div>
      </td>
        </tr>
  </tbody>
</table>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Current Address">Adress(Street, City, Zip Code)</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 1">Area Code and Telephone No</div>
      </th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td scope="row" data-label="Current Address">
        <div class="slds-truncate" title="Current Adress">{!Correspondence__c.Patient_Address__c}</div>
      </td>
        <td scope="row" data-label="Area Code and Telephone No">
        <div class="slds-truncate" title="Area Code and Telephone No">(480)7205699</div>
      </td>
        </tr>
  </tbody>
</table>
    <br></br><br></br>

<div class="slds-grid">
  <div class="slds-col slds-col slds-size_1-of-5"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Absent Parent" id="Absent Parent" value="off" />
      <label class="slds-checkbox__label" for="Absent Parent">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Absent Parent</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Change in Adress/Telephone" id="Change in Adress/Telephone" value="Off" />
      <label class="slds-checkbox__label" for="Change in Adress/Telephone">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Change in Adress/Telephone</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Change in Circumstances" id="Change in Circumstances" value="off" />
      <label class="slds-checkbox__label" for="Change in Circumstances">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Change in Circumstances</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Child Care" id="Child Care" value="off" />
      <label class="slds-checkbox__label" for="Child Care">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Child Care</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Community Placement Resources" id="Community Placement Resources" value="off" />
      <label class="slds-checkbox__label" for="Community Placement Resources">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Community Placement Resources</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col slds-col slds-size_1-of-5"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Deductions" id="Deductions" value="off" />
      <label class="slds-checkbox__label" for="Deductions">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Deductions</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Employment Services" id="Employment Services" value="Off" />
      <label class="slds-checkbox__label" for="Employment Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Employment Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="EPSDT" id="EPSDT" value="off" />
      <label class="slds-checkbox__label" for="EPSDT">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">EPSDT</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Family Health Services Nurse" id="Family Health Services Nurse" value="off" />
      <label class="slds-checkbox__label" for="Family Health Services Nurse">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Family Health Services Nurse</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Family Planning" id="Family Planning" value="off" />
      <label class="slds-checkbox__label" for="Family Planning">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Family Planning</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col slds-col slds-size_1-of-5"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Household Composition" id="Household Composition" value="off" />
      <label class="slds-checkbox__label" for="Household Composition">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Household Composition</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Income" id="Income" value="Off" />
      <label class="slds-checkbox__label" for="Income">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Income</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="LTSS Information Shared" id="LTSS Information Shared" value="off" />
      <label class="slds-checkbox__label" for="LTSS Information Shared">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">LTSS Information Shared</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Medicaid" id="Medicaid" value="off" />
      <label class="slds-checkbox__label" for="Medicaid">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Medicaid</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Medical/Disability" id="Medical/Disability" value="off" />
      <label class="slds-checkbox__label" for="Medical/Disability">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Medical/Disability</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col slds-col slds-size_1-of-5"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="MERP Shared" id="MERP Shared" value="off" />
      <label class="slds-checkbox__label" for="MERP Shared">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">MERP Shared</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Nursing Care/Level of Care" id="Nursing Care/Level of Care" value="Off" />
      <label class="slds-checkbox__label" for="Nursing Care/Level of Care">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Nursing Care/Level of Care</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Protective Services" id="Protective Services" value="off" />
      <label class="slds-checkbox__label" for="Protective Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Protective Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Refugee Services" id="Refugee Services" value="off" />
      <label class="slds-checkbox__label" for="Refugee Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Refugee Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Resources" id="Resources" value="off" />
      <label class="slds-checkbox__label" for="Resources">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Resources</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
    <div class="slds-col  slds-col slds-size_1-of-5"> 
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <span class="slds-checkbox">
                    <input type="checkbox" name="Support Services" id="Support Services" value="off" />
                    <label class="slds-checkbox__label" for="Support Services">
                        <span class="slds-checkbox_faux"></span>
                        <span class="slds-form-element__label">Support Services</span>
                    </label>
                </span>
            </div>
        </div>
    </div>
    <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
        <div class="slds-form-element__control">
            <span class="slds-checkbox">
                <input type="checkbox" name="TANF" id="TANF" value="Off" />
                <label class="slds-checkbox__label" for="TANF">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-form-element__label">TANF</span>
                </label>
            </span>
        </div>
        </div> </div>
        <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
        <div class="slds-form-element__control">
<apex:outputField label="Other" Value="{!Correspondence__c.Other__c}"/>
          <apex:outputLabel >Other: </apex:outputLabel> 
        </div>
        </div> </div>
        <div class="slds-col"> <div class="slds-form-element">
        <div class="slds-form-element__control">
            <u> <apex:outputField label="Reason for 2067" value="{!Correspondence__c.Reason_for_Form__c}"/> </u>
       
        </div>
        </div> </div>

<br></br>
</div>
<br></br>
<div>
    <span>
        <apex:outputLabel >Comments/Response: </apex:outputLabel> <br></br>
    <Div class="slds-box" Style="height:125px;">
          <apex:outputField label="Comments/Response" value="{!Correspondence__c.Comment_Response__c}"/>  
    </Div>
<br></br><br></br>
<div class="slds-grid slds-gutters">
    <div class="slds-col">
        
        <div style="padding: 1rem;">
            <div class="slds-align_Left" style="text-align: center; width: 400px; background-color: rgb(255, 255, 255);">
                <div class="slds-border_top">Signature</div>
            </div>
        </div>
    </div>
    <div class="slds-col">
        
        <div style="padding: 1rem;">
            <div class="slds-align_absolute-center" style="text-align: center; width: 400px; background-color: rgb(255, 255, 255);">
                <div class="slds-border_top" style="width: 200px">Date</div>
            </div>
        </div>
    </div>
    <div class="slds-col">
        
        <Div class="slds-scope" style="float:Right;margin-right: 300px;">
            <div class="slds-box" Style="height:80px;width:250px;">
                Area Code and Telephone Number
            </div>
        </Div>
    </div>
</div>
<br></br><br></br>
<div class="slds-text-heading_medium"><b>Response</b></div>

</span>
</div>
</div>
    </div>

<br></br>




  <!-- / REQUIRED SLDS WRAPPER -->
</body>
</apex:page>

 
Raj VakatiRaj Vakati

Rendered as pdf does not allow Internal and External style classes. it only allowing Inline styles. SO LDS will not work 
Raj VakatiRaj Vakati
https://salesforce.stackexchange.com/questions/178572/visualforce-renderas-pdf-not-supporting-slds-css/178589#178589
https://github.com/salesforce-ux/design-system/issues/341
Raj VakatiRaj Vakati
Advanced PDF isn’t generally available 
Alex Waddell 17Alex Waddell 17
If i were to gain access to the pilot program for advanced PDF would i still have this issue?
Raj VakatiRaj Vakati
I can suggest checking with the support team. As per Document, nowhere there specified. 
Manoj Mullapudi 15Manoj Mullapudi 15
Hi Alex/Raj,

I'm running into the same issue. Built a VF page using SLDS framework to display custom object data, render it as PDF and attach it to the record. But looks like SLDS does not support PDF. Is there any luck with Advanced PDF? I'm literally stuck, any help is appreciated! 

Thanks,
Manoj