I have created a visualforce page that has a button to export the page as a PDF. I created a clone of my current page with the same controller and renderAs tag added and I'm redirecting to the cloned page on click of the export button. However, the data is not coming in the pdf. I'm using AngularJs on my visualforce page.

Below is what I'm getting in the PDF : .ph-master-anim .table-anim td span{ display: block !important; }

Can some please advice what might be the reason for this.



You can't use AngularJS, jQuery, or any other JavaScript in the PDF engine. Your code must already be fully rendered by the time your constructor finishes, because that is what will be rendered. What you may be able to do is grab the innerHTML from the app DOM element, save that to a file (e.g. an attachment), then render the HTML in the new document.

<apex:page controller="RenderPdfController">
  <apex:outputText escape="false" value="{!htmlContent}" />

You'll need to experiment with this design a bit in order to get it to work correctly, but it shouldn't take too much effort.

  • I was also facing the same issue. I was using Vue.js. I didn't know PDF engine doesn't work with standard JS framework.. Thanks for the suggestion @sfdcfox – Kamruzzaman Oct 4 '18 at 10:05

The PDF renderer does not execute any client-side code. It renders only the HTML and CSS. Moreover it does not support any features that are "new" to HTML5 or CSS3. Note there is a more advanced PDF renderer on its way but it's still in pilot.

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.