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
Kyle_BrandtKyle_Brandt 

Export to PDF (Not Render)

Hi,

 

I have built a visualforce page which decodes a base64 string from text back into an image and want a button to export the results into a PDF.

 

Trialing with the concept of making it render direct to a PDF did not work as it was not showing the images in the PDF.

 

Could anyone please direct me to how I can create an export to pdf option which retains images?

MJ Kahn / OpFocusMJ Kahn / OpFocus
First, get the page working with it rendering as HMTL, not PDF. Be sure to avoid using fancy fonts, as the font options for VF PDFs are somewhat limited. Also be sure to refrain from using any JavaScript, as JavaScript won't be executed when you render as PDF.

Once that's working, try changing the page to render as a PDF.  If that doesn't work, post a simplified version of the code here so we can take a look.
Kyle_BrandtKyle_Brandt
OK so I am using javascript as i could not figure out any other way of concatenating html with an apex variable.

the plain html string looks like (full example at the bottom):
< img src="data:image/png;base64,encodedbase64stringhere" width="250" height="250" alt="SIGNATURE TAKEN" / >

My VF page outputs this in a blocktable with:
< html >
 < script type="text/javascript" >
  var spam='<apex:outputText rendered="true" value="{!SearchText1}{!myint.call2_vod__r.Signature_vod__c}{!SearchText2}" />'
  document.write(spam);

My apex holds those values using whilst pulling the signature using soql:
private string searchText1;
            public String getsearchText1(){
            searchText1='<img src="data:image/png;base64,';
                return searchText1;
           }
       
           private string searchText2;
            public String getsearchText2(){
            searchText2='" width="250" height="250" alt="SIGNATURE NOT CAPTURED" />';
                return searchText2;
           }


This is what a base64 string would look like if you used only html with the encoded string (if you want to look at it)
< img src="data:image/png;base64,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" width="250" height="250" alt="SIGNATURE TAKEN" / >
MJ Kahn / OpFocusMJ Kahn / OpFocus
Remember that JavaScript executes in the browser. When you render a page as PDF, the browser doesn't really come into play - there's no opportunity for it to execute the JavaScript. If your page is going to be rendering as a PDF, you have to create the image without using JavaScript. 

What is the image - where does it come from? I gather that it's variable - it's not something that you can store in a Static Resource, is it?
Kyle_BrandtKyle_Brandt
We use Veeva (built on top of salesforce) which has an offline tablet version where our users can capture signatures. This signature is stored into a field on the object signature_vod__c which is a long text area. Somewhere during save the image the tablet has captured is stored as the base64 string into that long text area.
Kyle_BrandtKyle_Brandt
i got it presenting without javascript like this:
<apex:column headerValue="Signature2">
                <img src="data:/image/png;base64,{!myint.call2_vod__r.Signature_vod__c}" />
still when i render this as a pdf it shows a grey thumbnail instead of the image
pandi GSpandi GS
HI
We face the same issue, the image is not render in PDF.. Any solutions? we receive the image in binary base64 format.

Thanks