function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sfdc2016sfdc2016 

how to apply css in iframe (rendered as pdf) from parent visualforce page?

My requirement: 
step 1: completed 
I have two visualforce pages, page 1 has a drop down select field, a checkbox and a button. When i click the button, page 2(rendered as pdf) is displayed as an iframe.

step 2: when i select the checkbox in page 1, I should be able to highlight the apex:outputText field in the iframe.

Any thoughts or help on this would be greatly appreciated.

Thanks in advance!

Page 1: 
<apex:page standardController="Opportunity" extensions="OppExt">
<apex:includeScript value="https://code.jquery.com/jquery-1.9.1.min.js"/>
<apex:stylesheet value="{!$Resource.customCSS}" /> 
<html>
<script type="text/javascript"> 
function generateIFrame() {
var oppId = document.getElementById('{!$Component.oId}').innerHTML;

console.log(oppId);
var doc = document.getElementById("volvo").value;
var cBox = document.getElementById("check").checked;
Visualforce.remoting.Manager.invokeAction(
                    '{!$RemoteAction.OppExt.getIFrame}', JSON.stringify(oppId), JSON.stringify(doc), JSON.stringify(cBox),
                    function(result, event) {
                    if(event.type === 'exception') {
                            alert('In exception');
                        }
                        else if (event.status) {
                     var elmnt = document.getElementById("if");
                            elmnt.src = result; 

                       }
                        else {
                            alert('In else');
                            console.log(event.message);
                        }
                    });
                }
        </script> 



  <!-- Begin Default Content REMOVE THIS -->

  <div>
  <apex:outputText label="Opportunity Name" style="color:#A9A9A9;font-size:20px" value="{!$CurrentPage.parameters.id}" id="oId"/>
  </div>
  <div>
  <select id="car">
  <option id="volvo" value="volvo">Volvo</option>
  <option id="saab" value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  </div>

    <div>
        <input id="check" type="checkbox" name="vehicle" value="yes" checked="false" /> I have a bike
      </div>

  <div>
  <button id="generate" onclick="generateIFrame()">Generate</button>
  </div>

    <span>
        <apex:iframe id="if"/>
    </span>


  </html>
</apex:page>

Page 2 (iframe): 
<apex:page renderAs="pdf" standardController="Opportunity" extensions="OppExt" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" >

     <apex:stylesheet value="{!$Resource.customCSS}" />  
<apex:includeScript value="https://code.jquery.com/jquery-1.9.1.min.js"/>

    <h1 id="header">Congratulations</h1>
  <p id="p1">
      This is your new Page: volvo
    </p>

    <apex:form >
 Name: <apex:outputText id="oppName" value="{!Opportunity.Name}"/>
        </apex:form>

</apex:page>
Controller Extension: 
global class OppExt {

    public static String chBox;
    public string testBox = 'test';
    public OppExt(){}

    public OppExt(ApexPages.StandardController std){

    }

    @RemoteAction
    global static string getIFrame(string oppId, string docName, string cBox){

        String opportunityId = (String)System.JSON.deserialize(oppId, String.class);
        String document = (String)System.JSON.deserialize(docName, String.class);
        chBox = (String)System.JSON.deserialize(cBox, String.class);

        String link;


        link = 'https://na50.visual.force.com/apex/'+document+'?id='+opportunityId;

        return link;
    } 

}