如何使用Highcharts导出整个页面或html内容而不仅仅是图表？

Question

嗨所有我的图表导出精细与highcharts即时获取我的PHP项目的图表

但问题是

我希望导入HTML内容或整个页面以及图表而不仅仅是图表

有可能吗？

谁能帮我

或显示这里是一个示例小提琴http://jsfiddle.net/YBXdq/

我需要导出图表下面的文字很好

Answer 1

有很多直接和间接的方法来实现这一目标

• 使用HTML Canvas:http://html2canvas.hertzen.com/

• 运用 wkhtmltoimage

例

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

• 用wkhtmltopdf+ImageMagic

  - 将网页转换为pdf使用wkhtmltopdf

  - 转换pdf为jpg 使用ImageMagic

例

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

• 使用PHP imagegrabwindow和imagegrabscreen

例

$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);

先进的例子

- 另请参阅使用PHP获取网站截图

对于可能的问题:使imagegrabscreen工作

• 如果安装了python ,请使用Webshort并使用php调用它exec

例

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

• 下载并使用网站缩略图生成器

例

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

• 使用boxcutter

例

exec('boxcutter -f image.png');

• 使用GrabzIt捕获PHP中的屏幕截图

例

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

• 使用wimg.ca

此当前页面的示例

  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

• TimThumb - PHP图像缩放器

例

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

我认为已经给出了足够多的例子

Answer 2

我找到了导出图表（打印）的简单解决方法

和

我没有使用任何插件，只是使用一些简单的旧 css 和一些 javascript

就我而言是

我想打印带有页面的一些特定 html 内容的图表

或者就我而言，我想删除页眉、页脚和左侧菜单

我不想显示按钮或不必要的内容

只显示页面内容、描述表和图表

这就是我如何实现它的。

> 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>

我们在这里重点关注打印页面时暗示的打印 CSS

根据您的使用情况，通过其类或 ID 访问您不希望打印的 div 或页面部分

例如

我不想显示按钮

 .linkBTN{ display:none;}

可以通过 javascript 简单地调用。

JavaScript :->

<script type="text/javascript">


function printpage()
{
     
window.print()
}

<script type="text/javascript">

我们可以调用打印函数来打印页面减去我们不想通过单击按钮与页面一起打印的元素，在我的例子中调用函数“printpage”，您可以看到，在打印为 printhide 类显示时，该按钮也不会显示打印时设置为无

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

如果您想打印更多内容，除了高图表打印之外，这不是打印图表的简单方法吗

唯一的缺点是，有时当您想要将图像与某些内容一起显示时，由于缺乏渲染图像的尺寸，图像会向下滑动。它将转到下一页。除了经过测试的工作之外。