Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rbb24Rbb24 

Visualforce renderAs="pdf" with Bootstrap

I am trying to create a PDF version of an existing visualforce page using Bootstrap.

The visualforce page looks great until I add the renderAs="pdf" attribute to the page, which causes me to receive the following error:

"PDF generation failed. Check the page markup is valid."

When I comment out the following line of code, the pdf generates(without styling obviously)
  
<apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'css/bootstrap.min.css')}" />

Has anyone come across this issue before?
Le NguyenLe Nguyen
Hi,

I have tried this before, However, I won't get the style right when you tried to get resource from static resource.  You should get the css file from an direct link. 
  
<apex:page renderAs="pdf" standardController="Job__c" extensions="PatientDetailsExt" standardStylesheets="false" showHeader="false"  sidebar="false" cache="false" applyhtmltag="false">
	<html>
		<head>
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
			<style> 
			@page {
			  size: A4 landscape;
			}
			</style>
		</head>
		<body>
			<h3>Patient Details:</h3>
			<table class="table" style="width:100%;">
				<thead>
					<tr>
						<th>Name:</th>
						<th>DOB:</th>
						<th>Medicare #</th>
						<th>DVA #</th>
						<th>Service:</th>
						<th>Date of Last Service</th>
					</tr>
				</thead>
				<tbody>
					<apex:repeat var="pt" value="{!PatientDetails}">
						<tr>
							<td>{!pt.PTName}</td>
							<td>{!pt.PTDOB}</td>
							<td>{!pt.PTMedicare}</td>
							<td>{!pt.PTDVA}</td>
							<td>{!pt.PTService}</td>
							<td>{!pt.PTDLS}</td>
						</tr>
					</apex:repeat>
				</tbody>
			</table>
		</body>
	</html>
</apex:page>

The codes above works for me.

Le
Rbb24Rbb24
Thanks Le,

I tried changing to a link reference.  My styling still works in the regular visualforce page, and I can now renderAs pdf, but the pdf doesn't have the correct styling.  Any thoughts?
Le NguyenLe Nguyen
HI Rbb, Render as PDF does not handle external CSS consistantly.  If you wish to keep the format. You have to inject the styles inline of page.

1. Add https://netdna.bootstrapcdn.com to your remote site setting.

2. Copy whole bootstrap css file in within style tags.

3. Replace ../ with https://netdna.bootstrapcdn.com/bootstrap/3.1.1/

4. Do the style like below example: 
<apex:page renderAs="pdf" standardController="Job__c" extensions="PatientDetailsExt" standardStylesheets="false" showHeader="false"  sidebar="false" cache="false" applyhtmltag="false">
	<html>
		<head>

			<style> 
			@page {
			  size: A4 landscape;
			}
		    /*Copy the whole Bootstrap CSS here*/
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 
.
.
.
.
.
.


			</style>

		</head>
		<body>

			<h3>Patient Details:</h3>
			<table class="table" style="width:100%;">
				<thead>
					<tr>
						<th>Name:</th>
						<th>DOB:</th>
						<th>Medicare #</th>
						<th>DVA #</th>
						<th>Service:</th>
						<th>Date of Last Service</th>
					</tr>
				</thead>
				<tbody>
					<apex:repeat var="pt" value="{!PatientDetails}">
						<tr>
							<td>{!pt.PTName}</td>
							<td>{!pt.PTDOB}</td>
							<td>{!pt.PTMedicare}</td>
							<td>{!pt.PTDVA}</td>
							<td>{!pt.PTService}</td>
							<td>{!pt.PTDLS}</td>
						</tr>
					</apex:repeat>
				</tbody>
			</table>


		</body>
	</html>
</apex:page>

Le
Rbb24Rbb24
Thanks Le,

I tried as you explained, but now I am back to the "PDF generation failed. Check the page markup is valid." error.
Le NguyenLe Nguyen
Hi,

In my case, It's working fine when I copy a whole bootstrap file into style tag.

Le
Rbb24Rbb24
Thanks so much for your help Le,

I ended up downloading a customized bootstrap file where I removed many of the features/components that I don't need on the PDF.  It's now working great using the file as a static resource.
Fabian ManzanoFabian Manzano

Hi 

Would it be possible for you to share your css? I download a custom bootstrap (I left gridsystem and tables), and copy and paste the minimize version directly into the page, however when I try to render the page I get the error:

PDF generation failed. Check the page markup is valid. 

I also add it in a static resource, but I got the same error
amrita h 7amrita h 7
As of now i have not seen Pdf generation using lighting component. here is an idea posted for the same. please upvote and help to get it done in the next releases.

https://success.salesforce.com/ideaView?id=0873A000000U3GIQA0