[SalesForce] How to display VF Page Content as PDF on button click

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">
    <head>
        <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>
        <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");
                alert($scope.draftCases);

                    alert($scope.draftCases[0].CaseNumber);
                    var a=$scope.draftCases[0].CaseNumber;
            });     
        </script>

    </head>
<body>
<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> 
</body>
</html>
</apex:page>

Best Answer

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.

EDIT

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.

Related Topic