-
ChatterFeed
-
0Best Answers
-
0Likes Received
-
0Likes Given
-
0Questions
-
1Replies
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:
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>
- Alex Waddell 17
- March 19, 2018
- Like
- 0