Last year I wrote a tutorial called Insert an Image into your PDF header with AlivePDF, well sort of
In that tutorial instead of using the native function, header, to insert an image into the pdf I opted to create an EventListener for when the page is created. I stated that “You can’t predict when an Image is going to load, more than likely it will be after the headers and even the pages are already created, as in my case.” Well it turns out you can if you use the Flex Framework [Embed()] tag and read in the image as an octet-stream mimeType.
[Embed(source="/assets/logo.ai",mimeType="application/octet-stream")]
and you read in the image as a ByteArray. The image can be a .gif, .jpg, but if you want a really crisp image at any resolution your better off creating an svg or what I like to do is read the image in straight from the Illustrator file, where the only image is the image I want to display. I’ve found that the other formats pixelate when embedded into a pdf at all resolutions but then again I’m not a graphics person.
Few things to Note:
- If you choose to use the Illustrator file approach you need to save the file as an Illustrator 8 or lower version, current version of AlivePDF doesn’t support higher versions.
- I ran into Alpha channel not supported errors when using .png files.
- The footer only appears on the last page added, this has been noted in the bug base.
What you have to do to insert the image into the header of each page, you guessed it, you have to create a class that extends PDF and override the header function. Then use the AlivePDF function addEPSImage().
Requirements:
Version I tested this against is AlivePDF 0.1.5 RC
To save the pdf from a web environment – create.php – this is not contained in the AlivePDF download for some reason?? but anyways this is it.
<?php
$method = $_GET['method'];
$name = $_GET['name'];
if ( isset ( $GLOBALS["HTTP_RAW_POST_DATA"] )) {
// get bytearray
$pdf = $GLOBALS["HTTP_RAW_POST_DATA"];
// add headers for download dialog-box
header(‘Content-Type: application/pdf’);
header(‘Content-Length: ‘.strlen($pdf));
header(‘Content-disposition:’.$method.’; filename=”‘.$name.’”‘);
echo $pdf;
} else echo ‘An error occured.’;
Here’s a more complete example:
package myPDF
{
// import all the required libs
import flash.utils.ByteArray;
import org.alivepdf.colors.RGBColor;
import org.alivepdf.display.Display;
import org.alivepdf.fonts.CoreFont;
import org.alivepdf.fonts.FontFamily;
import org.alivepdf.fonts.IFont;
import org.alivepdf.layout.Size;
import org.alivepdf.pdf.PDF;
import org.alivepdf.saving.Method;
public class Pdf_Report extends PDF
{
public var font:IFont = new CoreFont(FontFamily.HELVETICA);
[Embed(source="../assets/logo.ai",mimeType="application/octet-stream")]
private var imageStream:Class;
public function Pdf_Report(orientation:String=”Portrait”, unit:String=”Mm”, pageSize:Size=null, rotation:int=0)
{
super(orientation, unit, pageSize, rotation);
// we set the zoom to 100%
this.setDisplayMode(Display.DEFAULT);
this.setFont( font ,12, false);
// we add the 1st page
this.addPage();
this.setTitle(“My Report”);
this.setMargins(20,20,20,20);
}
public function createPDF():void
{
this.lineStyle(new RGBColor(0×000000),.25,0,1);
this.moveTo(10, 40);
this.lineTo(200, 40);
this.end();
this.textStyle( new RGBColor(0×666666), 1 );
this.setFont(font,14);
this.addText(“{ 1 PDF Content GOES HERE }”, 50, 120);
// we add the 2nd page
this.addPage();
this.lineStyle(new RGBColor(0×000000),.25,0,1);
this.moveTo(10, 40);
this.lineTo(200, 40);
this.end();
this.textStyle( new RGBColor(0×666666), 1 );
this.setFont(font,14);
this.addText(“{ 2 PDF Content GOES HERE }”, 50, 120);
this.save(Method.REMOTE,”create.php”,”inline”,”MyPDFReport.pdf”,”_blank”);
}
override protected function footer():void
{
this.textStyle( new RGBColor(0×666666), 1 );
this.setXY(15, -15);
var newFont:CoreFont = new CoreFont(FontFamily.HELVETICA);
this.setFont(newFont, 6);
this.addCell(160, 10, ‘My PDF Report’,0, 0, ‘L’);
this.addCell(30, 10, ‘Printed on ‘ + new Date().toDateString(),0, 0, ‘R’);
this.newLine(20);
}
override protected function header():void
{
this.setFont(font,12);
this.textStyle( new RGBColor(0×000000), 1 );
this.addText(“Report “,170, 10);
this.addText(“ReportID: “, 100, 20);
this.textStyle( new RGBColor(0×000000), 1 );
this.addText(“000001″,130,20);
var image:ByteArray = new imageStream() as ByteArray;
this.addEPSImage(image,4,4);
}
}
}
Now that our class is created we call the createPDF function to get everything rolling.
Here’s our main page that contains a single button when clicked calls the creaPDF function in our class
<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955″ minHeight=”600″>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
<fx:Script>
<![CDATA[
import myPDF.Pdf_Report;
protected function btn_createPDF_clickHandler(event:MouseEvent):void
{
var _myPDF:Pdf_Report = new Pdf_Report();
_myPDF.createPDF();
}
]]>
</fx:Script>
<s:Button x=”393″ y=”305″ label=”Create a PDF file” id=”btn_createPDF” click=”btn_createPDF_clickHandler(event)”/>
<s:Label x=”10″ y=”10″ text=”PDF TEST”/>
</s:Application>
View Demo