Rendering Aura Component as PDF via Visualforce Page

Question

So my current requirement is to create a "document" with some tables and such and then allow it to be downloaded as a PDF file. To go about this, I created an Aura component, then created a lightning App to render these both in a Visualforce page with the intention of using the renderAs="pdf" tag. Here's my code for the VF page:

<apex:page renderAs="pdf">
   <apex:includeLightning/>
   <apex:includeScript value="/lightning/lightning.out.js"/>
   <div id="componentid"/>
   <script>
   $Lightning.use("c:rateConfirmationContainer", function() {
       $Lightning.createComponent("c:rateConfirmation",
         { 
         },
         "componentid",
         function(cmp) {
            console.log('Aura component rendered');
         });
   });
   </script>

</apex:page>

When I use this without the renderAs tag, the vF page with nested Aura component displays fine (just plopped it on a lightning page). However, once I add the renderAs tag, the PDF-viewer renders find but the Aura component markup doesn't display (unless I add actual VF-allowed markup to the page). I assume this may be because the functionality that allows VF framework to connect with PDF service is incompatible with the functionality that allows VF to connect with Aura components.

Whether or not that's the case, is there a way to take an aura component, then render that in a PDF of sorts, even if it's using some sort of external library? Other ideas I've thought of are:

• Displaying the aura component in a separate tab then letting the user just download the page contents using regular browser functionality
• Displaying the aura component in separate tab then using an external library to take screenshot of the page, then exporting as downloadable PDF.

Thanks and let me know!

Answer 1

If I had to guess, it's probably a difference between how Visualforce works, vs Aura. Visualforce renders most of its HTML as the page loads. Aura on the other hand renders most of its HTML dynamically via JavaScript. Rendering as a PDF would require all of the HTML to exist at the time of page load.

If you just want the style of Aura, you might be able to use Visualforce to generate HTML based on the component templates at the SLDS site:

https://www.lightningdesignsystem.com/

This site gives you the raw HTML / CSS, without any functionality. I always then work on massaging it into my custom lightning components. But theoretically you should be able to add non-functional HTML/CSS into a Visualforce without touching the aura framework.