As I am in need of display the content of VF page into PDF on button click.How to generate VF page contents as PDF ON BUTTON CLICK using Java Script .

Here is my code:

<apex:page >
<html lang="en" ng-app="draftCaseApp" ng-controller="draftCaseCtrl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <apex:includeScript value="{!URLFOR($Resource.RForce_Ecare_STR, 'JS/angular.min.js')}"/> 
        <apex:stylesheet value="{!URLFOR($Resource.SLDS0122, 'assets/styles/salesforce-lightning-design-system-vf.css')}"/>
        <apex:includeScript value="{!URLFOR($Resource.svg4everybody1, 'svg4everybody-1.0.0/svg4everybody.js')}"/>               
        <script src="/soap/ajax/36.0/connection.js" type="text/javascript"></script>
        <script src="/soap/ajax/36.0/apex.js" type="text/javascript"></script>
            var sConnection = sforce.connection.sessionId = '{!$Api.Session_ID}'; 
            var sApplication = angular.module('draftCaseApp', []);
            sApplication.controller('draftCaseCtrl', function($scope) {

                alert("SELECT  CaseNumber, CreatedDate, Account.LastName, Account.FirstName,  Contact.LastName, Contact.FirstName FROM Case WHERE Status = 'Draft' AND Origin = 'E-Care' AND Spam__c = false  ORDER BY CreatedDate DESC");
                var draftCaseQuery  = sforce.connection.query("SELECT CaseNumber, CreatedDate, Account.LastName, Account.FirstName, Contact.LastName, Contact.FirstName,Account.PersMobiPhone__pc, Account.SMS__pc,Account.PersEmail__pc,Account.ComAgreemt__c,Account.Address__pc FROM Case WHERE  CaseNumber='4-01319283'  ORDER BY CreatedDate DESC");   
                $scope.draftCases = draftCaseQuery.getArray("records");

                    var a=$scope.draftCases[0].CaseNumber;

<br><b>Customer Agreement</b></br>
<br>Case{{draftCases[0].CaseNumber}} Created Date{{draftCases[0].CreatedDate}}</br>
<br>I agree to share my contact information with Renault</br>
<br>I preferred to be contacted via{{draftCases[0].Account.ComAgreemt__c}}</br>
<br>I preferred to be contacted via Phone:{{draftCases[0].Account.PersMobiPhone__pc}}</br>
<br>I agree to be contacted via SMS:{{draftCases[0].Account.SMS__pc}}</br>
<br>I agree to be contacted via Email:{{draftCases[0].Account.PersEmail__pc}}</br>
<br>I agree to be contacted via Post:{{draftCases[0].Account.Address__pc}}</br>
<br><b>Customer Signature</b></br>
 <button type="button" onclick="window.print();">Print</button> 
  <button type="button">Attach</button> 
  • RenderAs will not work for my case – Sandra Apr 7 '16 at 11:04
  • why renderAs will not work? because it is in angular? – Saumya Ranjan Satapathy Apr 7 '16 at 11:07
  • yes, renderAs doesn't support JS in page – kurunve Apr 7 '16 at 11:11
  • 2
    @kurunve Better say the PDF do not support the JS insides. – Sergej Utko Apr 7 '16 at 11:28
  • Already tried to rewrite your simple page logic with apex and a bit of visualforce? – Sergej Utko Apr 7 '16 at 11:32

A PDF cannot be rendered using the current render engine if it's generated dynamically using JS, etc. It also cannot contain any active content. You'll need to rewrite the page to send your data to a controller from the existing page to have it render again using that data with the attribute of renderAs=PDF. You could presumably also rewrite your page to use JS remoting as another alternative.


To clarify in response to some of the comments I see below your post. You can use a button on a page to have it rerender itself in another window using renderAs=PDF where the button and other active content has either been omitted or render=false has been applied to that content. The page simply can't have any active content or be generated dynamically from JS.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.