score:0

Accepted answer

i found a simple workaround for exporting charts (printing)

and

i didn't use any plugin just little plain old css and some javascript

which in my case is

i wanted to print the chart with some specific html content of the page

or in my case i wanted to remove header , footer and left menu

i dint wanted to show buttons or unecessary content

and just show the page content , description table and chart

so here is i how i achieved it.

> CSS :-

<style type="text/css">
@media print{
@page
        {
            size: auto;   /* auto is the initial value */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }
  body{ background-color:#FFFFFF; background-image:none; color:#000000 }
  .navimainbg{ display:none;}
  .printhide{ display:none;}
  .usercontent-footer{ display:none;}
  .linkBTN{ display:none;}
  .userheader{ display:none;}
  .user-profile-left{ display:none;}
  #userbgcontent{ width:100%;}
}
</style>

We are focussing on the print css here which we implied when the page is printed

acess the divs or portions of the page which you dont want ot be printed via their class or id depending upon your usage

for example

i didnt wanted to display the button

 .linkBTN{ display:none;}

which can be simply called via javascript.

Javascript :->

<script type="text/javascript">


function printpage()
{
     
window.print()
}

<script type="text/javascript">

we can invoke the print function to print the page minus elements we dont want to print with the page via click of a button by calling function in my case "printpage" as you can see this button will also not display while printing as printhide class display is set to none while priting

<input title="Print a Printer Friendly Page" class ="printhide" type="button" value="Print this page" onclick="printpage()">

isnt is it a simple way to print chart other than highcharts printing if you want to print more

only con is that sometime the image will slide down when you want to show it along with some conetent due to lack of size to render an image . it will shift to next page . other than its tested working .

score:4

You can try to print the page , or make a pdf using php file functions to get the desired html content .

or you can try the method told by baba to get the image :)

score:13

There are so many direct and indirect way to achieve this

Example 

  exec('wkhtmltoimage --quality 50 http://www.bbc.com bbc.jpg');

  • Using wkhtmltopdf + ImageMagic

    -- Convert the web page to pdf using wkhtmltopdf

    -- Convert pdf to jpg using ImageMagic

Example

exec("convert a.pdf a.jpg");

Example 

$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->Navigate("http://localhost");

/* Still working? */
while ($browser->Busy) {
    com_message_pump(4000);
}
$im = imagegrabwindow($handle, 0);
$browser->Quit();

header("Content-Type: image/png");
imagepng($im);
imagedestroy($im);

Advance Examples

-- Also See Get Website Screenshots Using PHP

For Possible Issues : Getting imagegrabscreen to work

  • use Webshort and call it from php using exec if you have python installed

Example

exec("python webshot.py https://example.com/webshot/php example.png");

Example

webthumb.php?url=http://www.google.com&x=150&y=150

Example 

exec('boxcutter -f image.png');
  • Capture Screenshots in PHP with GrabzIt

Example 

$grabzIt = new GrabzItClient("APPLICATION KEY", "APPLICATION SECRET");
$id = $grabzIt->TakePicture("http://www.google.com", "http://www.example.com/GrabzItHandler.php");

Example with this current page

  http://wimg.ca/https://stackoverflow.com/questions/10328457/how-to-export-the-whole-page-or-html-content-with-highcharts-not-just-the-chart/10330701#10330701

Example 

 timthumb.php?src=http://www.google.com/&webshot=1

I think have given more than enough example


Related Query

More Query from same tag