Trying to render this HTML as PDF in Visualforce but it throws a Salesforce internal error. However if I comment out the SLDS tag it renders. Not sure what the conflict might be.
<apex:page controller="OC10_generatePDF" renderAs="pdf" applyBodyTag="false" applyHTMLTag="false" showHeader="false" lightningStyleSheets="true" standardStylesheets="false" sidebar="false" docType="html-5.0">
<head>
<style>
@page {
size: A4;
}
</style>
<apex:slds />
<apex:stylesheet value="{!$Resource.correctiveActionRequestPDF}"/>
</head>
<body class="slds-scope">
<div class="slds-box slds-p-around_xx-large">
<h1 class="slds-align_absolute-center label">Corrective Action Request</h1>
<div class="page-outline slds-p-around_medium">
<section class="slds-grid">
<div class="slds-grid slds-grid_vertical slds-col slds-size_2-of-5">
<div class="slds-grid slds-col margin-seperation">
<div class="slds-col slds-size_2-of-5">
<p class="label">Audit Type</p>
</div>
<div class="slds-col slds-size_3-of-5">
<p class="data">ISO</p>
</div>
</div>
<div class="slds-grid slds-col margin-seperation">
<div class="slds-col slds-size_2-of-5">
<p class="label">POC:</p>
</div>
<div class="slds-col slds-size_3-of-5">
<p class="data">Wunder, G - 110/270</p>
<p class="data">Wunder, G - 110/270</p>
<p class="data">Wunder, G - 110/270</p>
</div>
</div>
<div class="slds-grid slds-col margin-seperation">
<div class="slds-col slds-size_2-of-5">
<p class="label">HT:</p>
</div>
<div class="slds-col slds-size_3-of-5">
<p class="data">Wunder, G - 110/270</p>
</div>
</div>
</div>
<div class="slds-grid slds-grid_vertical slds-col_bump-left slds-size_2-of-5">
<div class="slds-grid slds-col slds-grid_align-end">
<div class="slds-col slds-size_2-of-3">
<p class="label upper-right">Date:</p>
</div>
<div class="slds-col slds-size_1-of-3">
<p class="data">05/21/2021</p>
</div>
</div>
<div class="slds-grid slds-col slds-grid_align-end">
<div class="slds-col slds-size_2-of-3">
<p class="label upper-right">Return by Date:</p>
</div>
<div class="slds-col slds-size_1-of-3">
<p class="data">05/21/2021</p>
</div>
</div>
<div class="slds-grid slds-col slds-grid_align-end">
<div class="slds-col slds-size_2-of-3">
<p class="label upper-right">CAR/OR No: 00-</p>
</div>
<div class="slds-col slds-size_1-of-3">
<p class="data">99</p>
</div>
</div>
<div class="slds-grid slds-col slds-grid_align-end">
<div class="slds-col slds-size_2-of-3">
<p class="label upper-right">Severity Level:</p>
</div>
<div class="slds-col slds-size_1-of-3">
<p class="data">Rating [D]</p>
</div>
</div>
<div class="slds-grid slds-col slds-grid_align-end">
<div class="slds-col slds-size_2-of-3">
<p class="label upper-right">Status:</p>
</div>
<div class="slds-col slds-size_1-of-3">
<p class="data">Closed</p>
</div>
</div>
</div>
</section>
<section class="slds-grid">
<div class="slds-grid slds-grid_vertical slds-align-bottom slds-col slds-size_2-of-5">
<div class="slds-grid slds-col margin-seperation">
<div class="slds-col slds-size_2-of-5">
<p class="label">From:</p>
</div>
<div class="slds-col slds-size_3-of-5">
<p class="data">Wunder, G - 110/270</p>
<p class="data">Wunder, G - 110/270</p>
<p class="data">Wunder, G - 110/270</p>
</div>
</div>
</div>
<div class="slds-grid slds-col slds-size_3-of-5">
<div class="slds-col slds-size_1-of-3">
<p class="label phone">Phone:</p>
</div>
<div class="slds-col slds-size_1-of-3 margin-left">
<p class="data">720-555-5555</p>
<p class="data">720-555-5555</p>
<p class="data">720-555-5555</p>
</div>
</div>
</section>
<section class="slds-grid margin-seperation">
<div class="slds-grid slds-grid_vertical slds-col slds-size_2-of-5">
<div class="slds-grid slds-col">
<div class="slds-col slds-size_2-of-5">
<p class="label">Copy:</p>
</div>
<div class="slds-col slds-size_3-of-5">
<p class="data text-area">John Doe, john doe, john doe, john doe</p>
</div>
</div>
</div>
<div class="slds-grid slds-grid_vertical slds-col slds-size_3-of-5">
<div class="slds-grid slds-col">
<div class="slds-col slds-size_1-of-3">
<p class="label phone">W.O./Program:</p>
</div>
<div class="slds-col slds-size_1-of-3 margin-left">
<p class="data">Various</p>
</div>
</div>
<div class="slds-grid slds-col">
<div class="slds-col slds-size_1-of-3">
<p class="label phone">Division:</p>
</div>
<div class="slds-col slds-size_1-of-3 margin-left">
<p class="data">Other</p>
</div>
</div>
<div class="slds-grid slds-col">
<div class="slds-col slds-size_1-of-3">
<p class="label phone">Sub Division:</p>
</div>
<div class="slds-col slds-size_1-of-3 margin-left">
<p class="data">Other</p>
</div>
</div>
<div class="slds-grid slds-col">
<div class="slds-col slds-size_1-of-3">
<p class="label phone">P.O./M.O.#:</p>
</div>
<div class="slds-col slds-size_1-of-3 margin-left">
<p class="data">12345</p>
</div>
</div>
</div>
</section>
<section class="slds-grid">
<div class="slds-grid slds-grid_vertical slds-col slds-size_2-of-5">
<div class="slds-grid slds-wrap slds-col margin-seperation">
<div class="slds-col slds-size_2-of-5">
<p class="label">Drawing/Part No:</p>
</div>
<div class="slds-col slds-size_3-of-5">
<p class="data">123124144</p>
</div>
<div class="slds-col slds-size_2-of-5">
<p class="label">Rejection No:</p>
</div>
<div class="slds-col slds-size_3-of-5">
<p class="data">123124144</p>
</div>
</div>
</div>
<div class="slds-grid slds-grid_vertical slds-col slds-size_3-of-5">
<div class="slds-grid slds-col">
<div class="slds-col slds-size_1-of-3">
<p class="label phone">ISO:</p>
</div>
<div class="slds-col slds-size_2-of-3 margin-left">
<p class="data">ISO 4.14 Corrective and Preventative Act</p>
</div>
</div>
<div class="slds-grid slds-col">
<div class="slds-col slds-size_1-of-3">
<p class="label phone">Additional Information:</p>
</div>
<div class="slds-col slds-size_2-of-3 margin-left">
<p class="data text-area-small">Revision A</p>
</div>
</div>
</div>
</section>
<section class="slds-grid slds-grid_vertical slds-size_5-of-5 margin-seperation">
<div class="slds-col">
<p class="label">I. REQUIREMENTS AND DEFICIENCY:</p>
<p class="data text-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu placerat massa.
Pellentesque porta cursus mollis. Morbi a nunc quis dolor feugiat dapibus. Ut sit amet justo lacus.
Suspendisse nec magna eget ligula pellentesque porttitor. Etiam ultricies blandit pretium. Nullam
efficitur aliquet aliquam. Suspendisse laoreet ipsum eget est convallis tempor. Etiam rhoncus purus sed
finibus sollicitudin. Aliquam quis varius neque. Maecenas non pulvinar nulla, id maximus ipsum.</p>
</div>
</section>
<section class="slds-grid slds-grid_vertical slds-size_5-of-5 margin-seperation">
<div class="slds-col">
<p class="label">II. CORRECTIVE ACTION TAKEN Addressee complete Section II and return:</p>
<p class="label">Root Cause</p>
<p class="data text-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu placerat massa.
Pellentesque porta cursus mollis. Morbi a nunc quis dolor feugiat dapibus. Ut sit amet justo lacus.
Suspendisse nec magna eget ligula pellentesque porttitor. Etiam ultricies blandit pretium. Nullam
efficitur aliquet aliquam. Suspendisse laoreet ipsum eget est convallis tempor. Etiam rhoncus purus sed
finibus sollicitudin. Aliquam quis varius neque. Maecenas non pulvinar nulla, id maximus ipsum.</p>
</div>
<div class="slds-col">
<p class="label">Corrective Action Taken To Correct This Occurance: (include effective date)</p>
<p class="data text-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu placerat massa.
Pellentesque porta cursus mollis. Morbi a nunc quis dolor feugiat dapibus. Ut sit amet justo lacus.
Suspendisse nec magna eget ligula pellentesque porttitor. Etiam ultricies blandit pretium. Nullam
efficitur aliquet aliquam. Suspendisse laoreet ipsum eget est convallis tempor. Etiam rhoncus purus sed
finibus sollicitudin. Aliquam quis varius neque. Maecenas non pulvinar nulla, id maximus ipsum.</p>
</div>
<div class="slds-col">
<p class="label">Corrective Action Taken To Prevent Recurrence: (include effective date)</p>
<p class="data text-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu placerat massa.
Pellentesque porta cursus mollis. Morbi a nunc quis dolor feugiat dapibus. Ut sit amet justo lacus.
Suspendisse nec magna eget ligula pellentesque porttitor. Etiam ultricies blandit pretium. Nullam
efficitur aliquet aliquam. Suspendisse laoreet ipsum eget est convallis tempor. Etiam rhoncus purus sed
finibus sollicitudin. Aliquam quis varius neque. Maecenas non pulvinar nulla, id maximus ipsum.</p>
</div>
<div class="slds-grid slds-col slds-size_4-of-5">
<div class="slds-col slds-size_1-of-5">
<p class="label">Completed By:</p>
</div>
<div class="slds-col slds-size_2-of-5">
<p class="data">Wunder, G - 110/270</p>
<p class="data">Wunder, G - 110/270</p>
<p class="data">Wunder, G - 110/270</p>
</div>
<div class="slds-col slds-size_1-of-5">
<p class="label phone">Date:</p>
</div>
<div class="slds-col slds-size_1-of-5">
<p class="data">05/21/2021</p>
</div>
</div>
</section>
<section class="slds-grid slds-wrap slds-size_4-of-5">
<p class="label slds-col">III. FOLLOW-UP AND DISPOSITION:</p>
<div class="slds-grid slds-col slds-wrap">
<div class="slds-col slds-size_1-of-5">
<p class="label">Follow-up Reqd:</p>
</div>
<div class="slds-col slds-size_2-of-5">
<p class="data">Yes</p>
</div>
<div class="slds-col slds-size_1-of-5">
<p class="label phone">Follow-up Date:</p>
</div>
<div class="slds-col slds-size_1-of-5">
<p class="data">05/21/2021</p>
</div>
<div class="slds-col slds-size_1-of-5">
<p class="label">Comments:</p>
</div>
<div class="slds-col slds-size_4-of-5">
<p class="data text-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu placerat massa.
Pellentesque porta cursus mollis. Morbi a nunc quis dolor feugiat dapibus. Ut sit amet justo lacus.
Suspendisse nec magna eget ligula pellentesque porttitor. Etiam ultricies blandit pretium. Nullam
efficitur aliquet aliquam. Suspendisse laoreet ipsum eget est convallis tempor.</p>
</div>
<div class="slds-col slds-size_1-of-5">
<p class="label">Verified By:</p>
</div>
<div class="slds-col slds-size_2-of-5">
<p class="data">Wunder, G - 110/270</p>
</div>
<div class="slds-col slds-size_1-of-5">
<p class="label phone">Verification Date:</p>
</div>
<div class="slds-col slds-size_1-of-5">
<p class="data">05/21/2021</p>
</div>
</div>
</section>
</div>
</div>
</body>
</apex:page>
Here is the CSS:
.slds-box{
background-color: white;
width:210mm;
}
.page-outline {
border: 1px solid black;
}
.margin-seperation {
margin-bottom: 15px;
}
.label, .data {
padding: 2px;
margin-bottom: 2px;
}
.label {
font-weight: bold;
padding-bottom: 3px;
}
.data {
border-bottom: 1px solid black;
}
.upper-right {
text-align: right;
}
.phone {
padding-left: 10px;
}
.text-area {
height: 6.5rem;
background-color: #f7f7f7;
}
.text-area-small {
height: 2.5rem;
background-color: #f7f7f7;
}
