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

Question

嗨，我所有的图表都可以很好地导出，我正在为我的 php 项目获取图表

但问题是

我希望将 html 内容或整个页面连同图表一起导入，而不仅仅是图表

可以吗？？

谁能帮帮我

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

我需要导出图表下方的文字已经很好了

Answer 1

有很多直接和间接的方式来实现这一点

• 使用 HTML 画布：http://html2canvas.hertzen.com/

• 使用wkhtmltoimage

例子

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

• 使用wkhtmltopdf + ImageMagic

  -- 使用wkhtmltopdf将网页转换为pdf

  -- 使用 ImageMagic 将 pdf 转换为 jpg

例子

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

高级示例

-- 另见Get Website Screenshots Using PHP

对于可能的问题：Getting imagegrabscreen to work

• 使用Webshort，如果你安装了python，使用exec从php调用它

例子

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

• 下载使用Website Thumbnail Generator

例子

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

例子

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

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

Answer 2

您可以尝试打印页面，或者使用php文件函数制作pdf以获得所需的html内容。

或者你可以尝试baba告诉的方法来获取图像:)

Answer 3

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

和

我没有使用任何插件，只是简单的旧 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()">

如果你想打印更多，它是不是一种简单的方法来打印除 highcharts 打印之外的图表

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