[SalesForce] How to retain flex display order using Lightning Design System in a VF page while renderAs=”pdf”

It's been a few weeks since i'm trying to get slds-order– in Lightning Design System to work with renderAs="pdf" but the order is never maintained.

Please find below the sample code. When i preview a simple Vf page the order of divs are maintained but renderAs="pdf" doesn't seem to care about the order at all.

Please find the attached snapshot. You'd find that Vf does proper ordering as per the markup but once i place renderAs="pdf" it goes haywire.

If any other approach where i could use vanilla flex display to format the divs in a given order while renderAs="pdf" still kicking, is also fine. I'm aware of client side pdf rendering to convert the html -> canvas -> image -> pdf, but might be a lot of work to keep CSS intact along with pixels. I would go for that approach but, at the moment can't figure out why renderAs="pdf" does consider slds-order– class at all.

Any help is highly appreciated.

enter image description here
enter image description here

Thanks,
Sangram

<apex:page showHeader="false" 
           standardStylesheets="false" 
           sidebar="false" 
           docType="html-5.0"
           >    

    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

        <head>

            <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'styles/salesforce-lightning-design-system-vf.css')}" />
        </head>   

        <body>    

            <!-- REQUIRED SLDS WRAPPER -->
            <div class="slds">   
                <div class="slds-grid slds-wrap">
                  <div class="slds-col slds-size--1-of-1 slds-order--2">1</div>
                  <div class="slds-col slds-size--1-of-2 slds-order--1">2</div>
                </div>
            </div>
            <!-- / REQUIRED SLDS WRAPPER -->    

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

Best Answer

Finally it's been figured out, now i can keep the flexbox display order as well as CSS in my Vf page.

I've taken reference from the following website.

http://ulmdevice.altervista.org/pdfapihtml5/#documentation

Here's the code.

<apex:page showHeader="false" 
           standardStylesheets="false" 
           sidebar="false" 
           docType="html-5.0"
           >    

    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

        <head>
            <title>Gate Deliverable Report</title>
            <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'styles/salesforce-lightning-design-system-vf.css')}" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        </head>    

        <body>    

            <!-- REQUIRED SLDS WRAPPER -->
            <div class="slds" id="main">   
                <div class="slds-grid slds-wrap">
                  <div class="slds-col slds-size--1-of-1 slds-order--4">1</div>
                  <div class="slds-col slds-size--1-of-1 slds-order--1">2</div>
                  <div class="slds-col slds-size--1-of-1 slds-order--2">3</div>
                  <div class="slds-col slds-size--1-of-1 slds-order--3">4</div>
                </div>
            </div>
            <!-- / REQUIRED SLDS WRAPPER -->    
            <a href="#" onclick="htmlpdfimg()">Get PDF</a>
        </body>    

        <!-- Download jsdpdf.debug.js from https://github.com/MrRio/jsPDF -->
        <script type="text/javascript" src="/resource/html2pdf/jspdf.debug.js"></script>
        <!-- Download canvg project from https://code.google.com/p/canvg/ -->
        <script type="text/javascript" src="/resource/html2pdf/vendor/rgbcolor.js"></script>
        <script type="text/javascript" src="/resource/html2pdf/vendor/StackBlur.js"></script>
        <script type="text/javascript" src="/resource/html2pdf/vendor/canvg.js"></script>
        <!-- Download html2canvas project from http://html2canvas.hertzen.com/ -->
        <script type="text/javascript" src="/resource/html2pdf/html2canvas.js"></script>
        <!-- Include javascript library in your file html -->
        <script type="text/javascript" src="/resource/pdfUtil"></script>

        <script>

            function htmlpdfimg(){
              var imghtml = 'main';
              var orientation = "p";
              var unitmeasure = "mm";
              var q1 = 297;
              var q2 = 210;
              var m1 = 5;
              var m2 = 5;
              HTMLPDFimg(imghtml, orientation, unitmeasure, q1, q2, m1, m2);
            };
        </script>
    </html>
</apex:page>

Here's the video demo.

https://www.youtube.com/watch?v=zT5G6OyoK_s

Thanks

Related Topic