I am developing a site using Zend PHP framework. On a page I have a chart created with Google Chart API - https://developers.google.com/chart/. I would like to add a button to allow the user to download the chart as a PDF file (essentially convert the chart to an image and embed it in a PDF).
I have been able to convert the google chart to an image using a javascript function that generates the image data string - http://www.battlehorse.net/attach/topics/charts/google_charts_to_image.html
function getImgData(chartId) {
var chartContainer = document.getElementById(chartId);
var chartArea = chartContainer.getElementsByTagName('iframe')[0].
contentDocument.getElementById('chartArea');
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData;
}
I have also downloaded a free PHP class to handle generating the PDF - http://www.fpdf.org/
I have been able to use an ajax function to pass the image data string to a zend controller. I can then save the image locally and use it to build a PDF file and save that locally too.
//store the image locally
$data = substr($image,strpos($image,",")+1); //removing the "data:image/png;base64," part
file_put_contents ('downloads/'.$title.'.png', base64_decode($data));
// create PDF document
$pdf = new FPDF();
$pdf->AliasNbPages();
$pdf->AddPage();
$pdf->Image('downloads/'.$title.'.png',10,6,30);
//destroy the local copy of the image
fclose('downloads/'.$title.'.png');
unlink('downloads/'.$title.'.png');
//save the PDF document
$pdf->Output('downloads/'.$title.'.pdf');
I am now stuck because I cannot find a way to present the PDF file for downloading. I need to use an Ajax request to generate the PDF as the image data string is too long for a standard URL. So I think I need to redirect the user to the download link for the file after it has been generated (and then delete it again afterwards).
Does anyone know how I can serve the file for download, if I enter the file path into my browser I get a path not found error (e.g. "MyApp/public/downloads/myChart.pdf"). I have read in a few places how to set the header and body of the response in the controller but nothing has worked so far.